클라이언트로 넘어가자마자 마주친 첫번째 문제.
SVG 파일로 아이콘을 넣어라!
사실 간단하게 해결할 수 있다.
import React from 'react';
const Profile = () => {
return (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M26.6666 15C26.6666 16.7682 25.9642 18.4638 24.714 19.7141C23.4637 20.9643 21.768 21.6667 19.9999 21.6667C18.2318 21.6667 16.5361 20.9643 15.2859 19.7141C14.0356 18.4638 13.3333 16.7682 13.3333 15C13.3333 13.2319 14.0356 11.5362 15.2859 10.286C16.5361 9.03575 18.2318 8.33337 19.9999 8.33337C21.768 8.33337 23.4637 9.03575 24.714 10.286C25.9642 11.5362 26.6666 13.2319 26.6666 15ZM23.3333 15C23.3333 15.8841 22.9821 16.7319 22.3569 17.3571C21.7318 17.9822 20.884 18.3334 19.9999 18.3334C19.1159 18.3334 18.268 17.9822 17.6429 17.3571C17.0178 16.7319 16.6666 15.8841 16.6666 15C16.6666 14.116 17.0178 13.2681 17.6429 12.643C18.268 12.0179 19.1159 11.6667 19.9999 11.6667C20.884 11.6667 21.7318 12.0179 22.3569 12.643C22.9821 13.2681 23.3333 14.116 23.3333 15Z"
fill="#949CFF"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 1.66669C9.87496 1.66669 1.66663 9.87502 1.66663 20C1.66663 30.125 9.87496 38.3334 20 38.3334C30.125 38.3334 38.3333 30.125 38.3333 20C38.3333 9.87502 30.125 1.66669 20 1.66669ZM4.99996 20C4.99996 23.4834 6.18829 26.69 8.17996 29.2367C9.57868 27.3999 11.3831 25.9113 13.4523 24.8872C15.5216 23.8631 17.7995 23.3313 20.1083 23.3334C22.3872 23.3312 24.6365 23.8492 26.6848 24.848C28.7332 25.8468 30.5266 27.2999 31.9283 29.0967C33.3724 27.2027 34.3447 24.992 34.7648 22.6477C35.1849 20.3033 35.0407 17.8926 34.3441 15.615C33.6476 13.3374 32.4187 11.2584 30.7591 9.55008C29.0995 7.84173 27.057 6.55312 24.8006 5.79087C22.5441 5.02862 20.1386 4.81464 17.7831 5.16664C15.4275 5.51864 13.1896 6.42651 11.2546 7.81511C9.31954 9.20371 7.74298 11.0331 6.65534 13.152C5.5677 15.2709 5.00026 17.6183 4.99996 20ZM20 35C16.5565 35.0052 13.2171 33.8206 10.5466 31.6467C11.6215 30.1079 13.0522 28.8515 14.7169 27.9845C16.3817 27.1174 18.2313 26.6653 20.1083 26.6667C21.9619 26.6652 23.7891 27.106 25.4382 27.9524C27.0872 28.7988 28.5106 30.0264 29.59 31.5334C26.8988 33.7779 23.5043 35.0049 20 35Z"
fill="#949CFF"
/>
</svg>
);
};
export default Profile;이런 식으로 바로 React의 Component화 할 수 있기 때문!
그런데 위와 같은 방식으론 컴포넌트를 일일히 만들어줘야하는 귀찮음이 생긴다.
검색을 하다보니 위처럼 컴포넌트화 하는 일련의 과정을 자동으로 하는 좋은 아이가 있어서 사용하기로 결정했다.
이름하야,
SVGR
SVGR 사용
SVGR
Transform SVGs into React components.
즉, SVG를 Component로 바꿔주는 라이브러리다.
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)이렇게 svg 파일을 바로 컴포넌트처럼 사용할 수 있게 된다.
아래는 공식문서를 죽 따랐다.
webpack 설정
yarn add @svgr/webpack --dev 설치 후
next를 사용하고 있으므로 next.config.js 파일을 생성하고 아래와 같은 코드를 추가하였다.
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
},
};svg 파일 그대로 불러와보기
이런 식으로 불러왔더니
...?
당황하지 않고 styled-component를 이용하여 css를 적용하였다.
귀요미가 되었다.
