리액트에서 SVG 이미지를 어떻게 사용하고 계신가요?

Svg를 reactcomponent 로 사용해보시는건 어떨까요 fill이나 height width 를 조절하고싶으면 svg 파일에 fill=#fff 부분을 fill="current" 로 변경하면 색깔을 지정할 수 있습니다. import {ReactComponent as Arrow_up} from "./arrow_up.svg" const App = () =>{ ... return <Arrow_up fill={'white'} /> }

안녕하세요 김병연님! 리액트에서 SVG 이미지를 사용하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은, SVG 파일을 import해서 컴포넌트로 만드는 것입니다. 예를 들어, #1과 같이 SVG 파일을 import해서 컴포넌트로 만들 수 있습니다. #2 이렇게 하면 fill 속성을 포함한 SVG 이미지를 컴포넌트 안에서 제어할 수 있습니다. 컴포넌트를 생성할 때 props로 fill 속성 값을 전달하면 됩니다. #3 SVG 이미지가 리스트 아이템처럼 동적으로 렌더링되는 경우에는, 리스트 아이템 컴포넌트 안에서 SVG 컴포넌트를 동적으로 생성할 수 있습니다. 이렇게 하면, 리스트 아이템의 선택 여부에 따라 fill 속성 값이 변경되는 SVG 아이콘을 생성할 수 있습니다. 이 방법을 사용하면, 개별적으로 불러오는 방법보다 더 효율적이고 유지보수가 쉬울 수 있습니다. #4그리고, SVG 이미지를 img 태그 대신 object 태그를 사용해서 불러오는 방법도 있습니다. 이 방법을 사용하면, fill 속성을 CSS로 제어할 수 있습니다. 하지만, 이 방법은 일부 브라우저에서 성능 이슈가 있을 수 있으므로 주의해야 합니다. 이 방법은 상황에 따라 적절하게 사용하면 좋습니다. 위와 같은 방법들 중에서, 가장 적합한 방법은 상황에 따라 다르기 때문에, 프로젝트 요구사항과 개발 환경을 고려하여 선택하시면 됩니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! 틀린 내용은 없는지, 답변이 도움이 되었는지 댓글로 작성해 주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#1
import { ReactComponent as Icon } from './icon.svg';

function MyComponent() {
  return <Icon />;
}


#2
import { ReactComponent as Icon } from './icon.svg';

function MyComponent() {
  return (
    <>
      <Icon fill="red" />
      <Icon fill="blue" />
    </>
  );
}


#3
import { ReactComponent as Icon } from './icon.svg';

function ListItem({ selected }) {
  const fillColor = selected ? 'red' : 'gray';
  
  return (
    <div>
      <Icon fill={fillColor} />
      <span>Some text</span>
    </div>
  );
}

function MyComponent() {
  const items = [
    { id: 1, selected: true },
    { id: 2, selected: false },
    { id: 3, selected: true },
  ];
  
  return (
    <div>
      {items.map(item => <ListItem key={item.id} selected={item.selected} />)}
    </div>
  );
}

#4
<object type="image/svg+xml" data="./icon.svg">
  <param name="fill" value="red" />
</object>