● vite 환경에서 react-svg stroke, fill 적용하는 법

프로젝트를 진행하다가, svg파일의 border와 색을 칠할 수 없을까? 그런 생각을 문득 했읍니다..

<svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00005 8.40005L2.10005 13.3C1.91672 13.4834 1.68338 13.575 1.40005 13.575C1.11672 13.575 0.883382 13.4834 0.700048 13.3C0.516715 13.1167 0.425049 12.8834 0.425049 12.6C0.425049 12.3167 0.516715 12.0834 0.700048 11.9L5.60005 7.00005L0.700048 2.10005C0.516715 1.91672 0.425049 1.68338 0.425049 1.40005C0.425049 1.11672 0.516715 0.883382 0.700048 0.700048C0.883382 0.516715 1.11672 0.425049 1.40005 0.425049C1.68338 0.425049 1.91672 0.516715 2.10005 0.700048L7.00005 5.60005L11.9 0.700048C12.0834 0.516715 12.3167 0.425049 12.6 0.425049C12.8834 0.425049 13.1167 0.516715 13.3 0.700048C13.4834 0.883382 13.575 1.11672 13.575 1.40005C13.575 1.68338 13.4834 1.91672 13.3 2.10005L8.40005 7.00005L13.3 11.9C13.4834 12.0834 13.575 12.3167 13.575 12.6C13.575 12.8834 13.4834 13.1167 13.3 13.3C13.1167 13.4834 12.8834 13.575 12.6 13.575C12.3167 13.575 12.0834 13.4834 11.9 13.3L7.00005 8.40005Z" fill="fill" />
</svg>

위는 제가 활용하던 svg 파일인데요, 

import { ReactComponent as Close } from '../../../assets/button/close.svg';

이런식으로 파일상단에서 불러올 svg파일을 컴포넌트로 불러와주었습니다.

저는 vite 환경에서 진행했으며, 'vite-plugin-svgr' 플러그인을 설치하고 svg파일을 컴포넌트로 불러와주었습니다.

이후, 코드에서 컴포넌트로 삽입후 어떻게 stroke와 fill값을 변경할 수 있을까 찾아보았는데, path 태그에 fill, stroke 프로퍼티를 추가해주면 되었습니다. 프로퍼티는 각각, fill, stroke로 주어야합니다.

<svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="fill" stroke="stroke" d="M7.00005 8.40005L2.10005 13.3C1.91672 13.4834 1.68338 13.575 1.40005 13.575C1.11672 13.575 0.883382 13.4834 0.700048 13.3C0.516715 13.1167 0.425049 12.8834 0.425049 12.6C0.425049 12.3167 0.516715 12.0834 0.700048 11.9L5.60005 7.00005L0.700048 2.10005C0.516715 1.91672 0.425049 1.68338 0.425049 1.40005C0.425049 1.11672 0.516715 0.883382 0.700048 0.700048C0.883382 0.516715 1.11672 0.425049 1.40005 0.425049C1.68338 0.425049 1.91672 0.516715 2.10005 0.700048L7.00005 5.60005L11.9 0.700048C12.0834 0.516715 12.3167 0.425049 12.6 0.425049C12.8834 0.425049 13.1167 0.516715 13.3 0.700048C13.4834 0.883382 13.575 1.11672 13.575 1.40005C13.575 1.68338 13.4834 1.91672 13.3 2.10005L8.40005 7.00005L13.3 11.9C13.4834 12.0834 13.575 12.3167 13.575 12.6C13.575 12.8834 13.4834 13.1167 13.3 13.3C13.1167 13.4834 12.8834 13.575 12.6 13.575C12.3167 13.575 12.0834 13.4834 11.9 13.3L7.00005 8.40005Z" fill="fill" />
</svg>

그 다음 svg 컴포넌트에 넣을 색상을 기입해주면 끝

<Close fill="#a1a1aa" stroke="black" />