์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ICT์ง์
- ํ๋ก ํธ์๋
- ์๋ฆฟ์์ ํ
- react
- CSS
- ๊นํ์ฌ์ดํธ
- ๋จธ์ ๋ฌ๋
- java 11 ์ค์น
- ์์
- ์ทํ๊ท๊ฑธ์ด
- axios์ธ์คํด์ค
- ๋ฅ๋ฌ๋
- ์ฒดํฌ๋ฐ์ค์ปค์คํ
- ๊ณผ๋์ ํฉ๊ณผ ๊ณผ์์ ํฉ
- ICTํ๊ธฐ
- ICT์ธํด์ญ
- ์์ด๋์ค๋ณต
- svg์
- api๊ณตํตํ
- ๋งฅ๋ถ
- ์ปค์คํ
- ๊นํ์๋ฌ
- ํ ์คํธ ์ธํธ
- ํผ๊ณต๋จธ์
- ios
- M1
- styled-components
- ์ปด๊ณต์ ๋ฐฐ
- ํผ์ ๊ณต๋ถํ๋ ๋จธ์ ๋ฌ๋
- XCode
- Today
- Total
Hi-๋๐ High-๋โ๏ธ
[React] SVGํ์ผ ์์ ๋ณ๊ฒฝํ๊ธฐ ๋ณธ๋ฌธ
๋ฒํผ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋ค ๋ณด๋ ํ ๋ง์ ๋ฐ๋ผ ์ด๋ฏธ์ง์ ์์๋ ๋ฐ๊ฟ์ผ ํ๋ค. SVGํ์ผ์ ๊ฒฝ์ฐ ๋งํฌ์ ์ธ์ด๋ก ํํ๋๊ธฐ ๋๋ฌธ์ ์์์ ์ฝ๊ฒ ๋ฐ๊ฟ ์ ์๋ค.
1 ) SVG ํ์ผ ์์ ํ๊ธฐ
<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 7C0.447715 7 0 7.44772 0 8C0 8.55228 0.447715 9 1 9V7ZM13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289L7.34315 0.928932C6.95262 0.538408 6.31946 0.538408 5.92893 0.928932C5.53841 1.31946 5.53841 1.95262 5.92893 2.34315L11.5858 8L5.92893 13.6569C5.53841 14.0474 5.53841 14.6805 5.92893 15.0711C6.31946 15.4616 6.95262 15.4616 7.34315 15.0711L13.7071 8.70711ZM1 9H13V7H1V9Z" fill="none"/>
</svg>
SVGํ์ผ์ ์์์ ๋ฐ๊พธ๋ ค๋ฉด ๋จผ์ ์์ ์ฝ๋์ฒ๋ผ fill="none"
์ผ๋ก ์์ฑ๋์ด ์๋ ๋ถ๋ถ์ fill="current"
๋ก ๋ฐ๊ฟ์ผ ํ๋ค.
์ฌ๊ธฐ์ ์ฃผ์ํ ์ ์ ๋ชจ๋ fill
์ ๋ฐ๊ฟ์ผ ํ๋ค๋ ๊ฒ์ด๋ค. ๋ด๊ฐ ๋ฐ๊พธ๊ณ ์ถ์ svgํ์ผ์ ๊ฒฝ์ฐ fill
์ด 2๊ตฐ๋ฐ ์์๋ค. ํ ๊ตฐ๋ฐ๋ง ๋ฐ๊ฟจ์ ๋๋ ์๋์ด ์ ๋๋ค.
2 ) fill ์์ฑ ์ง์ ํ๊ธฐ
SVGํ์ผ์ ์์ ํ์ผ๋ฉด ํด๋น ์ปดํฌ๋ํธ๋ก ๊ฐ์ props๋ฅผ fill="#A0A0A0"
์ ๊ฐ์ด ์ง์ ํ๋ฉด ์์์ด ๋ฐ๋๋ค.
<NextArrow fill="#A0A0A0" />
๋ค๋ง ์ฌ๊ธฐ์๋ ์ฃผ์ํด์ผ ํ๋ ๋ถ๋ถ์ด ์๋ค. SVGํ์ผ์ ๋ค์๊ณผ ๊ฐ์ด img src๋ฅผ ์ด์ฉํด์ ๋ถ๋ฌ์ค๋ฉด ํด๋น ๋ด์ฉ์ด ์ ์ฉ์ด ์๋๋ค.
<img src='images/next_arrow.svg' alt='next_arrow' />
SVG๋ฅผ ์ปดํฌ๋ํธ๋ก ๋ง๋ค์ด์ผ๋ง ์ ์ฉ์ด ๋๋ค! ๋์ ๊ฒฝ์ฐ NextArrow๋ผ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ fill ์์ฑ์ ์ง์ ํด ์ฃผ๋ฉด ๋!
import { ReactComponent as NextArrow} from "../../images/next_arrow.svg";
const Button = () => {
return <NextArrow fill="#A0A0A0" />
};
ํ์ดํ ์์์ ํฐ์์ผ๋ก ๋ฐ๊พธ๊ณ ์ถ์ผ๋ฉด ์ด๋ ๊ฒ fill ์์ฑ๋ง ๋ฐ๊ฟ์ ์ง์ ํ๋ฉด ๋๋ค.
<NextArrow fill="#FFFFFF" />
'React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] ์๋ฌ ํด๊ฒฐ - "sh: react-scripts: command not found" (0) | 2023.07.04 |
---|---|
[React] API ์ค์ ๊ณตํตํ - ํ๊ฒฝ๋ณ์, axios ์ธ์คํด์ค ์ฌ์ฉํ๊ธฐ (0) | 2023.05.08 |
[React] API ์ฐ๋ํ๊ธฐ with axios (0) | 2023.05.08 |
[React] Inputํ๊ทธ numberํ์ ์๋ฆฟ์ ์ ํ (1) | 2023.04.10 |
[React] Checkbox ์ปค์คํ ํ๊ธฐ with styled-components (+์ ๋๋ฉ์ด์ ) (0) | 2023.04.06 |