CSS 필터를 사용하여 React 구성 요소로 SVG 아이콘 색상 사용자 정의

테마를 구축하는 경우와 같이 svg 아이콘의 색상을 동적으로 변경하려는 경우 특히 figma에서 직접 내보낸 svg 파일을 사용하는 경우 값을 동적으로 전달하기가 어려울 수 있습니다. SVG 파일에는 채우기, 획, 필터가 있는 그림자 값, <g> , <circle> , <rect> ... 및 각 아이콘에 대한 다른 구조가 포함된 사전 설정 값이 있습니다.

CSS 필터를 사용하여 svgs 라이브러리에 이것을 구현하는 안정적인 방법을 찾았으므로 공유하고 싶습니다.

필터란?

필터는 다양한 시각 효과(브라우저용 Photoshop 필터와 같은 종류)를 구현하는 CSS 속성입니다. (You can see more explanation here)
svg에서 보이는 색상을 수정하기 때문에 <g> 요소 아래의 각 요소(예: <svg> , )를 수정할 필요가 없습니다.

필터로 16진수 색상을 어떻게 설정합니까?

좋은 예를 보여줍니다. 각 필터 값을 조정하여 원하는 헥스 색상처럼 보이는 모양을 얻을 수 있습니다.

React 구성 요소와 함께 사용하려면 어떻게 해야 합니까?

프로젝트에서 16진수 값을 CSS 필터 값으로 변환하는 방법을 추가하기만 하면 됩니다. 직접 만들거나 위의 코드펜에서 스니펫을 복사할 수 있지만 이번에는 구현하기 쉽도록 this library (hex-to-css-filter)을 사용했습니다.

주의해야 할 두 가지가 있습니다.

이 라이브러리는 기본 색상을 #000으로 가정하므로 흰색 기반 아이콘을 사용하는 경우 채우기 #000으로 교체해야 합니다.

React 인라인 스타일을 사용하는 경우 값 끝에 있는 세미콜론을 제거해야 합니다.

SVG로 React 컴포넌트 만들기

먼저 props를 허용하고 SVG 요소에 전달하는 SVG로 반응 구성 요소를 만듭니다.

import * as React from "react";

const SvgMicOff = (props) => (
  <svg
    width="24"
    height="25"
    viewBox="0 0 24 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M1 2L23 24"
      stroke="black"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
...
  </svg>
);

export default SvgMicOff;

App.js에서 구성 요소와 hex-to-css-filter 라이브러리가 필요합니다.

import MicOff from "../icons/mic-off";
import { hexToCSSFilter } from "hex-to-css-filter";

16진수 색상 설정

App 구성 요소에서 상태에서 hexColor를 동적으로 전달하는 스타일을 만듭니다. (그리고 반드시 세미콜론을 제거하십시오!)

export default function App() {
  const [hexColor, setHexColor] = useState("#000");

  let cssFilterValue = "";
  const cssFilter = hexToCSSFilter(hexColor, {
    acceptanceLossPercentage: 1,
    maxChecks: 10
  });
  cssFilterValue = cssFilter.filter.replace(";", "");
  //semi-colon should be removed from the string

그림자 설정

그림자를 추가하려면 다음과 같이 만들 수도 있습니다.

const [shadow, setShadow] = useState("");
...
 const shadowColor =
    shadow === "dark"
      ? "drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"
      : shadow === "light"
      ? "drop-shadow(1px 1px 1px rgba(255,255,255,0.5))"
      : "";

마지막으로 문자열로 연결하기만 하면 됩니다. :)

<MicOff style={{ filter: `${cssFilterValue} ${shadowColor}` }} />

그리고 이것은 결과입니다!


자유롭게 플레이하고 개발에 도움이 되길 바랍니다. :)
또한 개선할 수 있는 부분이 있으면 알려주세요!