이미지는 웹 페이지에서 많은 부분을 차지하는 리소스이다. 홈페이지의 로딩 속도의 가장 영향을 많이 주는 것이 바로 이미지, 사진 파일이다. 그래서 단순히 코드를 몇 줄 줄이는 것보다, 이미지의 용량을 줄이는 것이 웹페이지의 성능을 높이는 데에 더 효율적일 것이다. SVG를 활용을 하면 이미지를 여러 개 받아오지 않고, 하나의 이미지만 받아와도 여러 개를 받아 온 것처럼의 효과를 볼 수 있을 것이다. 따라서 개발을 할 때, SVG를 잘 활용하여 사용하는 것이 중요하다고 생각한다.
1. src
import temp from 'images/temp.svg';
<img src={temp} />단순히 image를 import해서 사용하는 경우이다. 이런 경우에는 svg의 최대 장점인 color 색상을 변경할 수 없기 때문에, 만약 디자이너가 color 색상을 "yellow" 에서 "blue"로 변경을 요청 할 때, 우리는 "blue"색상의 svg 이미지를 하나 더 파일에 저장을 하고 그 파일을 다시 import를 해야된다. 이러한 과정들은 매우 귀찮고 번거롭다.
2. React Component
이제 color 색상을 변경할 수 있는 방법을 알아보고자 한다.
React에서 활용할 수 있는 방법인 데, SVG를 Component화 시키는 것이다.
색상 변경은 물론이고, 크기도 역시 변경할 수 있다.
<svg
width="9"
height="13"
viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.893749 11.6438L2 12.75L8.25 6.5L2 0.250001L0.893748 1.35625L6.0375 6.5L0.893749 11.6438Z"
fill="current" // custom 하고 싶은 것을 current로 !
/>
</svg>
위의 svg파일을 images 폴더에 넣어준다. 이 때 Component로 사용하기위해서는 SVG 코드에서 바꾸고자 하는 요소를 "current"로 바꿔주어야 한다. current로 값을 바꿔준 값은, 원하는 대로 props를 넘겨주어 custom이 가능해진다.
import { ReactComponent as Temp } from 'images/temp.svg';
<Temp width="18" height="18" fill="blue" />2-1. svgr
위의 2번에서 import 할 때, 매번 { ReactComponent as Temp } 라고 적는 것이 귀찮을 수가 있다. 그런 경우에는 webpack을 이용하여 단순히 Temp 라고 적을 수 있다.
-
svgr 설치
$ yarn add @svgr/webpack -D
-
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
//...
{
test: /\.svg$/,
use: ['@svgr/webpack'],
},
],
},
//...
};svgr를 설치하고, webpack.config.js에 위와 같이 작성해주면 된다.
import Temp from 'images/temp.svg';
<Temp width="18" height="18" fill="blue" />3. Font
SVG를 font로 변경해서 사용할 수 있다. font로 변경이 되면 마찬가지로 color, font-size를 자유자재로 변경 가능하다. font 역시 vector 기반으로 만들어진 것이지 때문에 이미지가 깨지지 않는다.
+ Reference
