You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
svgo를 활용해 svg파일을 최적화 할 때, dynamic color를 사용하기위해 currentColor옵션을 활용하게 되는데, 해당 옵션을 사용하게 되면 기존에 정의된 fill 값이 currentColor 변수로 초기화되면서 하나의 단색 형태의 아이콘으로만 사용할 수 있습니다.
그래서 dynamic, static icon을 분리해 dynamic icon에 대해서만 해당 옵션을 활성화 할 수 있도록 구현하려고 합니다.
constsvgoConfig={plugins: [{name: 'preset-default',params: {overrides: {removeViewBox: false,},},},/** * Set the `fill` attribute to `currentColor` for all `path` elements. * This allows us to dynamically change the color of the SVG icon. * @see https://gomakethings.com/currentcolor-and-svgs/#dynamic-svg-colors */{name: 'convertColors',params: {currentColor: true,},},],}
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
icon들을 모아두는 web-icons 패키지를 구현중에 있습니다.
아래의 아이콘들은 항상 정해진 색상을 보여줘야 하지만, 메뉴아이콘, 돋보기 아이콘 등 두번째 이미지와 같은 아이콘들은 client에서 동적으로 색상을 적용할 수 있어야 됩니다.
코드상으로 예를 들면
현재 구성중인 패키지는 아래와 같은 구성입니다.
그래서
dynamic color icon
과static color icon
을 구분한 방법이 필요합니다첫번째 방법은 디렉토리를 나누는 방법입니다.
두번째 방법으로는 icon이름에 prefix를 붙이는 방법입니다.
이렇게 나눠야 하는 이유는???
svgo를 활용해 svg파일을 최적화 할 때, dynamic color를 사용하기위해 currentColor옵션을 활용하게 되는데, 해당 옵션을 사용하게 되면 기존에 정의된 fill 값이 currentColor 변수로 초기화되면서 하나의 단색 형태의 아이콘으로만 사용할 수 있습니다.
그래서 dynamic, static icon을 분리해 dynamic icon에 대해서만 해당 옵션을 활성화 할 수 있도록 구현하려고 합니다.
5 votes ·
Beta Was this translation helpful? Give feedback.
All reactions