문제상황

SVG 이미지를 사용하면서, hover가 됐을 때 이미지의 색을 변경할 수 있게 만들고 싶었다. 그런데 생각보다 SVG를 다루는 것이 어려웠다.

문제 해결

<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon/Edit" clip-path="url(#clip0_1_288)">
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.1991 2.3656C1.49994 2.06476 1.90796 1.89575 2.33341 1.89575H6.41675C6.65837 1.89575 6.85425 2.09163 6.85425 2.33325C6.85425 2.57488 6.65837 2.77075 6.41675 2.77075H2.33341C2.14003 2.77075 1.95456 2.84757 1.81782 2.98432C1.68107 3.12107 1.60425 3.30653 1.60425 3.49992V11.6666C1.60425 11.86 1.68107 12.0454 1.81782 12.1822C1.95456 12.3189 2.14003 12.3958 2.33341 12.3958H10.5001C10.6935 12.3958 10.8789 12.3189 11.0157 12.1822C11.1524 12.0454 11.2292 11.86 11.2292 11.6666V7.58325C11.2292 7.34163 11.4251 7.14575 11.6667 7.14575C11.9084 7.14575 12.1042 7.34163 12.1042 7.58325V11.6666C12.1042 12.092 11.9352 12.5001 11.6344 12.8009C11.3336 13.1017 10.9255 13.2708 10.5001 13.2708H2.33341C1.90796 13.2708 1.49994 13.1017 1.1991 12.8009C0.898258 12.5001 0.729248 12.092 0.729248 11.6666V3.49992C0.729248 3.07447 0.898258 2.66644 1.1991 2.3656Z" fill="#515151"/>
<path id="Vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M11.6668 1.53345C11.4546 1.53345 11.2511 1.61773 11.1011 1.76774L5.64514 7.22372L5.26804 8.7321L6.77642 8.355L12.2324 2.89902C12.3824 2.74901 12.4667 2.54554 12.4667 2.33338C12.4667 2.12123 12.3824 1.91776 12.2324 1.76774C12.0824 1.61773 11.8789 1.53345 11.6668 1.53345ZM10.4824 1.14902C10.7965 0.834913 11.2225 0.658447 11.6668 0.658447C12.111 0.658447 12.537 0.834913 12.8511 1.14902C13.1652 1.46314 13.3417 1.88916 13.3417 2.33338C13.3417 2.77761 13.1652 3.20363 12.8511 3.51774L7.30945 9.05941C7.25338 9.11548 7.18313 9.15526 7.1062 9.17449L4.77287 9.75782C4.62378 9.79509 4.46606 9.75141 4.3574 9.64274C4.24873 9.53408 4.20505 9.37636 4.24232 9.22728L4.82565 6.89394C4.84489 6.81702 4.88466 6.74676 4.94073 6.69069L10.4824 1.14902Z" fill="#515151"/>
</g>
<defs>
<clipPath id="clip0_1_288">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

내가 사용하려는 SVG 파일이다. 우선 파일 안에서 fill 속성을 전부 current로 변경해줘야 한다.

<svg width="14" height="14" viewBox="0 0 14 14" fill="current" xmlns="http://www.w3.org/2000/svg">
<g id="Icon/Edit" clip-path="url(#clip0_1_288)">
<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.1991 2.3656C1.49994 2.06476 1.90796 1.89575 2.33341 1.89575H6.41675C6.65837 1.89575 6.85425 2.09163 6.85425 2.33325C6.85425 2.57488 6.65837 2.77075 6.41675 2.77075H2.33341C2.14003 2.77075 1.95456 2.84757 1.81782 2.98432C1.68107 3.12107 1.60425 3.30653 1.60425 3.49992V11.6666C1.60425 11.86 1.68107 12.0454 1.81782 12.1822C1.95456 12.3189 2.14003 12.3958 2.33341 12.3958H10.5001C10.6935 12.3958 10.8789 12.3189 11.0157 12.1822C11.1524 12.0454 11.2292 11.86 11.2292 11.6666V7.58325C11.2292 7.34163 11.4251 7.14575 11.6667 7.14575C11.9084 7.14575 12.1042 7.34163 12.1042 7.58325V11.6666C12.1042 12.092 11.9352 12.5001 11.6344 12.8009C11.3336 13.1017 10.9255 13.2708 10.5001 13.2708H2.33341C1.90796 13.2708 1.49994 13.1017 1.1991 12.8009C0.898258 12.5001 0.729248 12.092 0.729248 11.6666V3.49992C0.729248 3.07447 0.898258 2.66644 1.1991 2.3656Z" fill="current"/>
<path id="Vector (Stroke)_2" fill-rule="evenodd" clip-rule="evenodd" d="M11.6668 1.53345C11.4546 1.53345 11.2511 1.61773 11.1011 1.76774L5.64514 7.22372L5.26804 8.7321L6.77642 8.355L12.2324 2.89902C12.3824 2.74901 12.4667 2.54554 12.4667 2.33338C12.4667 2.12123 12.3824 1.91776 12.2324 1.76774C12.0824 1.61773 11.8789 1.53345 11.6668 1.53345ZM10.4824 1.14902C10.7965 0.834913 11.2225 0.658447 11.6668 0.658447C12.111 0.658447 12.537 0.834913 12.8511 1.14902C13.1652 1.46314 13.3417 1.88916 13.3417 2.33338C13.3417 2.77761 13.1652 3.20363 12.8511 3.51774L7.30945 9.05941C7.25338 9.11548 7.18313 9.15526 7.1062 9.17449L4.77287 9.75782C4.62378 9.79509 4.46606 9.75141 4.3574 9.64274C4.24873 9.53408 4.20505 9.37636 4.24232 9.22728L4.82565 6.89394C4.84489 6.81702 4.88466 6.74676 4.94073 6.69069L10.4824 1.14902Z" fill="current"/>
</g>
<defs>
<clipPath id="clip0_1_288">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

이렇게 fill 속성의 값을 current로 변경해주면 SVG의 색상을 css로 변경할 수 있게 된다.

import { ReactComponent as IconName } from "../../icon.svg"

SVG를 import할 때 위의 코드처럼 선언하면, SVG파일을 IconName이라는 이름의 컴포넌트로 만들 수 있다.

import { ReactComponent as Edit } from "../../icon.svg"

const Container = () => {
	return <Edit fill="red" />;
}

이런 방식으로 사용하면 SVG의 색상을 동적으로 변경할 수 있다.