[web-icons] dynamic color icon과 static color icon 구분 방법

[rkskekzzz]

icon들을 모아두는 web-icons 패키지를 구현중에 있습니다.
아래의 아이콘들은 항상 정해진 색상을 보여줘야 하지만, 메뉴아이콘, 돋보기 아이콘 등 두번째 이미지와 같은 아이콘들은 client에서 동적으로 색상을 적용할 수 있어야 됩니다.

코드상으로 예를 들면

# 색상 변경이 필요없는 아이콘들
<NetworkIcon />
# dynamic 하게 색상 변경이 필요한 아이콘들
<SearchIcon style={{ color : dark/light mode or isHover }} />

현재 구성중인 패키지는 아래와 같은 구성입니다.

그래서 dynamic color icon과 static color icon을 구분한 방법이 필요합니다

첫번째 방법은 디렉토리를 나누는 방법입니다.

dynamic-icons
ㄴ search-icon.svg
static-icons
ㄴ network-icon.svg

두번째 방법으로는 icon이름에 prefix를 붙이는 방법입니다.

icons
ㄴ dynamic-search-icon.svg
ㄴ static-category-network-icon.svg

이렇게 나눠야 하는 이유는???

svgo를 활용해 svg파일을 최적화 할 때, dynamic color를 사용하기위해 currentColor옵션을 활용하게 되는데, 해당 옵션을 사용하게 되면 기존에 정의된 fill 값이 currentColor 변수로 초기화되면서 하나의 단색 형태의 아이콘으로만 사용할 수 있습니다.
그래서 dynamic, static icon을 분리해 dynamic icon에 대해서만 해당 옵션을 활성화 할 수 있도록 구현하려고 합니다.

  const svgoConfig = {
    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,
        },
      },
    ],
  }