img, svg

계속 업데이트 中

SVG

import {ReactComponent as HEART} from '../../assets/images/Icons/Heart.svg';

...

<HEART />

💠 색 변경하기

<Svg2 fill='#A6D4FF' />

❗️색에 변경되지 않는 경우 : fill 속성이 SVG 내부에 정의되어 있어서, 외부에서 전달된 fill 값으로 덮어쓰이지 않을 수 있다.
🙆🏻‍♀️ SVG 파일 자체에 정의된 색상을 제거하거나, fill 속성을 currentColor로 설정하면 부모 요소의 color 속성이 적용된다.

// Header.js
<LOGO style={{ fill: headerColor.textColor }} />

// SVG 파일
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="44" viewBox="0 0 14 44" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m13.0729 17.6825a3.61 3.61 0 0 0 -1.7248 3.0365 3.5132 3.5132 0 0 0 2.1379 3.2223 8.394 8.394 0 0 1 -1.0948 2.2618c-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6834-.9089-2.4787-2.0243a9.7842 9.7842 0 0 1 -1.6628-5.2776c0-3.0984 2.014-4.7405 3.9969-4.7405 1.0535 0 1.9314.6919 2.5924.6919.63 0 1.6112-.7333 2.8092-.7333a3.7579 3.7579 0 0 1 3.1604 1.5802zm-3.7284-2.8918a3.5615 3.5615 0 0 0 .8469-2.22 1.5353 1.5353 0 0 0 -.031-.32 3.5686 3.5686 0 0 0 -2.3445 1.2084 3.4629 3.4629 0 0 0 -.8779 2.1585 1.419 1.419 0 0 0 .031.2892 1.19 1.19 0 0 0 .2169.0207 3.0935 3.0935 0 0 0 2.1586-1.1368z" fill-opacity="0.8" fill="currentColor"></path></svg>