...

Feather ์์ด์ฝ ์ ์ฉํ๊ธฐ
์ด ์์ด์ฝํฉ์ ์์ด ์ฑ์์ ธ ์์ง ์๊ณ , ๋ผ์ธ์ผ๋ก๋ง ๋ ๋์์ธ์ผ๋ก ๊นจ๋ํ๊ณ ๊ท์ฌ์ด ๋ชจ์์ ๊ฐ์ง๋ค.
์ฌ๋๋ค์ด ๊ฐ์ฅ ๋ง์ด ์ฐ๋ ํฐํธ ์์ด์ฝ์ ๊ฑฐ์ฅ์ธ Font Awesome ์ ์์ฒ๋ผ ์์ด ๋น์์ง ์์ด์ฝ์ ์ฐ๋ ค๋ฉด ์ ๋ฃ ์ ๊ธฐ ๊ฒฐ์ ๋ฅผ ํด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ด ์์ด์ฝํฉ์ ๊ฐ๋ฒผ์ฐ๋ฉด์๋ ์ธ๋งํ ๊ฒ ๊ฐ๋ค.
์์ด์ฝ์ ํ์ฅ์๋ SVG๋ก ์ด๋ฏธ์ง ๊นจ์ง์์ด ์ฌ์ด์ฆ ์กฐ์ ๊ณผ ์์ ๋ณ๊ฒฝ์ด ์์ฃผ ์ฝ๊ฒ ๊ฐ๋ฅํ๋ค. ๋ํ ์ผ๋ฌ์คํธ ๋์์ธ์ผ๋ก ์ฌ์ฉํ๊ธฐ์๋ ์ ํฉํ๋ค.
Feather โ Simply beautiful open source icons
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
feathericons.com

์ฌ์ดํธ์ ๋ค์ด๊ฐ๋ฉด ์์ด์ฝ ์ข ๋ฅ๋ฅผ ๊ฒ์ํ ์ ๋ ์๊ณ , ์์ด์ฝ ๋ฐ์ค๋ฅผ ๋๋ฅด๋ฉด svg ํ์ผ๋ก๋ ๋ด๋ ค ๋ฐ์์ง๋ค.
Feather ์์ด์ฝ ์ฌ์ฉ๋ฒ
- ์๋์ ๊ฐ์ด html ๋ฌธ์์ head๋ถ๋ถ์์ script๋ก ์์ค๋ฅผ ๊ฐ์ ธ์ค๊ณ ,
- ํ์ํ ๋ถ๋ถ์ tag์ ์์ฑ์ผ๋ก data-feather="circle"์ ์ง์ด๋ฃ๊ณ ,
- ๋งจ ์๋ซ์ค์ feather.replace()๋ผ๋ ๋ถ๋ถ์ ๋ฃ์ด ์คํํด์ฃผ๋ฉด ๋๋ค.
<!-- ์์ค ๋ค์ด -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- example icon -->
<i data-feather="circle"></i>
<!-- ์์ด์ฝ ์ ์ฉ -->
<script>
feather.replace()
</script>
์์ด์ฝ ํฌ๊ธฐ, ๊ตต๊ธฐ, ์๊น ์ค์
๋ค์ css ์์ฑ์ ์ด์ฉํด feather ์์ด์ฝ svg๋ฅผ ์ปค์คํ ํ ์๋ ์๋ค.
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
์ด ๊ธ์ด ์ข์ผ์ จ๋ค๋ฉด ๊ตฌ๋ & ์ข์์
์ฌ๋ฌ๋ถ์ ๊ตฌ๋
๊ณผ ์ข์์๋
์ ์์๊ฒ ํฐ ํ์ด ๋ฉ๋๋ค.