SVG 스프라이트를 활용하여 아이콘 효율적으로 사용하기 - 2

이전글에서는 SVG 스프라이트의 개념과 수동 생성 방법을 알아보았는데요, 이번 글에서는 SVG 스프라이트를 자동으로 생성하는 방법들에 대해 적어볼까 합니다. 프로젝트의 환경에 따라, 프로젝트의 규모에 따라 알맞은 방식으로 자동생성하면 SVG 스프라이트 관리를 수월하게 할 수 있습니다.

Webpack을 활용한 자동생성

Webpack을 사용하는 프로젝트라면 플러그인을 설치하여 SVG 스프라이트를 자동생성 할 수 있습니다. 이 글에서는 svg-sprite-loader를 설치하여 스프라이트를 생성하겠습니다.

npm install svg-sprite-loader --save-dev

위 코드로 플러그인을 설치한 후, webpack.conpig.js 파일에 다음과 같이 아이콘 ID를 설정해 줍니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]', // 아이콘 ID 설정
            },
          },
        ],
      },
    ],
  },
};

Gulp를 활용한 자동생성

Gulp를 사용한 프로젝트에서는 gulp-svg-sprite플러그인을 사용하면 편리합니다.

npm install gulp gulp-svg-sprite --save-dev

위 코드로 gulp-svg-sprite 플러그인을 설치한 후, gulpfile.js에 다음과 같이 테스크를 추가해 줍니다.

const gulp = require('gulp');
const svgSprite = require('gulp-svg-sprite');

gulp.task('sprite', function () {
  return gulp.src('icons/*.svg') // 아이콘 폴더 경로
    .pipe(svgSprite({
      mode: {
        symbol: { dest: '.', sprite: 'sprite.svg' }
      }
    }))
    .pipe(gulp.dest('dist'));
});

gulp sprite

명령어를 입력하면 SVG 스프라이트가 생성됩니다.

SVG Sprite Generator 를 사용하여 자동생성

SVG Sprite Generator와 같은 온라인 사이트를 이용하면 간편하게 SVG 스프라이트를 생성할 수 있습니다. 사이트 접속 후 화면에 SVG 개별 파일을 끌어다 놓으면 자동으로 생성됩니다.