[react-icon] 웹에 아이콘 넣기, react icon을 그라데이션으로 채우기

아이콘을 쓸 일이 있어서 어떻게 아이콘을 넣는지 찾아봤다. 

1. png 파일을 다운받아 코드에 넣기

2. svg 파일을 다운받아 코드에 넣기

3. react-icon 사용하기

 

1, 2번은 파일 자체를 public 폴더에 넣고 src로 불러와 넣는 것이다.

svg는 png보다 용량이 적기에 많이 사용한다.

하지만 파일을 넣기 때문에 아이콘 자체에 색을 적용한 후 파일로 넣어야 한다.

 

그래서 react-icon을 사용하기로 했다.

https://react-icons.github.io/react-icons

React Icons

사용방법은 먼저 모듈을 설치해준다.

npm install react-icons --save

그 후 페이지에서 사용하고 싶은 아이콘의 이름을 검색한다.

import { AiFillHeart } from "react-icons/ai";
import { AiOutlineHeart } from "react-icons/ai";

위의 형식으로 import해주면 된다. 다만 주의할 점은 from "react-icons/ai" 에서 bold처리를 한 부분이 아이콘의 이름 첫 두글자와 일치해야 한다. 나는 AiFillHeart 아이콘을 불러와 ai를 적어준 것이다.

그럼 이렇게 불러와진다.

단색을 적용해야할 경우

<AiFillHeart color='red' />

와 같이 적용하면 된다.

하지만 나는 그라데이션을 적용하고 싶었다. 찾아보니 거의 단색을 적용하는 방법만 나와있고, 그라데이션에 대한 내용은 나오지 않았다. 역시 답은 stackflow였다.

 <svg width="0" height="0">
    <linearGradient id="gradient" x1="100%" y1="0%" x2="100%" y2="100%">
        <stop stopColor="#6F61C6" offset="0%" />
        <stop stopColor="#97A4E8" offset="100%" />
    </linearGradient>
</svg>

<AiFillHeart stroke= 'url(#gradient)' />

이렇게 적용하면 된다고 적혀있었다. 

하지만 적용되지 않았다. 그래서 스크롤해서 읽어보니 

obs: In some packs you may need to switch "stroke" to "fill".

이런 글이 써있었다.

그래서 stroke를 fill로 바꿔주니까 적용됐다!

 

그라데이션 방향도 설정할 수 있다. 

linearGradient 태그를 검색해보았다. 

<defs>
    <linearGradient id="gradient" x1="100%" y1="0%" x2="100%" y2="100%">
        <stop stopColor="#6F61C6" offset="0%" />
        <stop stopColor="#97A4E8" offset="100%" />
    </linearGradient>
</defs>

이런 형식으로 사용되어야 한다. defs 안에, linearGradient, linearGradient 안에 stop태그가 필요하다.

defs 태그는 꼭 필요하다고 했는데 왜인지 나는 defs 태그가 없어도 적용이 됐다. 

stop 태그는 색을 지정한다. stopColor는 직접적인 색의 속성, offset은 아이콘을 기준으로 색의 중점이 몇 %에 위치하는가를 설정한다.

linearGradient 태그에서 그라데이션의 방향을 설정할 수 있다. 

- 수평 그라데이션: x1!=x2이고, y1==y2일 때

- 수직 그라데이션: x1==x2 y1!=y2일 때

- 대각 그라데이션: x1!=x2 y1!=y2일 때

대각 그라데이션은 색의 차이가 잘 보이지 않는 것 같아 두개 중 한 색을 검은색으로 바꿨다.

 

 

 

 

참고 자료

https://stackoverflow.com/questions/46916869/react-icons-apply-a-linear-gradient

react-icons apply a linear gradient

https://ossam5.tistory.com/117

[HTML기초문법] 16강 SVG태그의 effect와 gradient - 오쌤의 니가스터디