반응형
SVG 파일에서 fill="#A6D4FF"로 컬러셋이 들어가있는 곳을 찾아서 "current"를 대신 넣어준다
<svg width="51" height="61" viewBox="0 0 51 61" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.5296 39.6198C49.0992 35.6518 50.5946 30.9141 50.5946 25.8235C50.5946 11.8596 39.3591 0.54248 25.4988 0.54248C11.6386 0.54248 0.405273 11.8596 0.405273 25.8213C0.405273 30.9119 1.9007 35.6518 4.47027 39.6176C4.47027 39.6176 4.48129 39.633 4.48571 39.6396C4.82096 40.1558 5.17387 40.6586 5.54441 41.1461C9.28738 46.208 12.8782 48.2041 18.2048 52.0816C24.0387 56.3275 25.4988 60.5403 25.4988 60.5403C25.4988 60.5403 26.959 56.3253 32.7929 52.0816C38.1217 48.2041 41.7103 46.208 45.4533 41.1483C45.8238 40.6586 46.1767 40.1558 46.512 39.6396C46.5164 39.633 46.5208 39.6242 46.5274 39.6176L46.5296 39.6198Z"
fill="current"/>
</svg>
리액트 svg 컴포넌트에 fill argument를 추가하면서 색깔을 자유롭게 변경할 수 있다.
import React from 'react';
import { VictoryChart, VictoryScatter, VictoryBar, VictoryAxis, VictoryLabel, VictoryContainer } from 'victory';
import { ReactComponent as Svg2} from "./svg/file2_.svg";
...
return <Svg2 fill='#A6D4FF' />
...반응형
'프론트엔드 웹 > React' 카테고리의 다른 글
| addEventLister scroll / wheel (0) | 2023.06.14 |
|---|---|
| dom-to-image를 이용하여 컴포넌트를 jpeg/png 파일로 만든 뒤, formData 형식으로 API Post하기 (0) | 2023.05.25 |
| React Image Component Export to PNG/JPEG/SVG (0) | 2023.05.03 |
| React에서 svg file 사용하는 방법 (0) | 2023.05.03 |
| PresignedURL 통해서 S3로 이미지 업로드하기 (0) | 2023.03.10 |