easy-spriter

손쉽게 (png, svg) 이미지 스프라이트를 적용할 수 있는 툴
개인적으로 sprite 환경을 구축하는데 불필요한 시간이 너무 많이 든다고 생각해서 만든 모듈.

• 이미지의 비율을 변경할 수는 없으며, width 값을 줌으로써 이미지 사이즈를 변경할 수 있습니다.
• width 값을 주지 않는다면, 원본 이미지의 width 값이 들어갑니다.
• Version 1 에서는 png sprite 는 아직 지원하지 않고 있습니다. (Version 2.0.0 지원 계획)

Getting Started

Script

const path = require('path');
const EasySprite = require('path of easy-sprite').default;

const spriter = new EasySpriter({
  mode: 'svg', // default: svg
  name: 'mysprite' // default: 'mysprite'
});

spriter.addAll({
  entry: path.resolve(__dirname, 'sprite')
});

spriter
  .compile({
    output: {
      sprite: path.resolve(__dirname, 'img'),
      scss: path.resolve(__dirname, 'scss')
    }
  })
  .then(() => {
    /* scss, sprite 파일이 모두 완성 된 후에 이어서 작업할 수 있음. */
  });

/*
- output 경로에 mysprite.scss, mysprite.svg 생성
- mysprite.scss 파일내에 get-sprite-mysprite() mixin 을 통해서 아이콘을 설정할 수 있음.
*/

Before Directory Structure

root
├── img
├── scss
└── sprite
      ├── icon01.svg
      ├── icon02.svg
      └── icon03.svg

After Directory Structure

root
├── img
│     └── sp_mysprite.svg
├── scss
│     └── sp_mysprite.scss
└── sprite
      ├── icon01.svg
      ├── icon02.svg
      └── icon03.svg

Sprite 이미지 파일 생성 후 다음과 같이 사용 get-sprite-스프라이트이름(아이콘이름, 너비, 높이)

• sprite 이름: mysprite
• 적용할 아이콘 이름: cat.svg

.test-sprite {
  @include get-sprite-mysprite('cat', 60);
  // or
  @include get-sprite-mysprite('cat');
}

다음과 같이 컴파일 됨

.test-sprite {
  display: inline-block;
  width: 60px;
  height: 60px; // 원본 이미지 비율에 맞게 설정됨
  background: url(../img/sp_mysprite.svg) no-repeat;
  background-position: 63.65592px 73.66729px;
  background-size: 1031px 619px;
  vertical-align: top;
}

Options

• bgRootUrl [String]: css background-image 의 url 루트 경로 (default: relative of output paths)
• filePrefix [String]: file 이름 앖에 붙는 prefix 설정 (default: sp_)
• padding[Number]: 생성된 스프라이트 이미지의 이미지 사이 간격 설정

const spriter = new EasySpriter({
  mode: 'svg',
  name: 'mysprite',
  options: {
    bgRootUrl: '/myassets', // ex) background: url(/myassets/mysprite.svg)
    filePrefix: 'hello_', // ex) hello_mysprite.svg, hello_mysprite.scss
    padding: 10
  }
});

Super Easy Mode

초간단 사용법: entry / output 만 설정하면 됨, 각 스프라이트의 이름은 자동으로 폴더의 이름으로 설정됨 (.으로 시작되는 폴더는 안됨)

Script

const path = require('path');
const SuperEasySprite = require('path of easy-sprite').SuperEasySpriter;

const spriter = new SuperEasySpriter({
  mode: 'svg',
  entry: path.resolve(__dirname, 'sprites'),
  output: {
    sprite: path.resolve(__dirname, 'img'),
    scss: path.resolve(__dirname, 'scss')
  },
  options: {
    /*... same */
  }
});

spriter.compile(() => {
  console.log('sprite done!');
});

Before Directory Structure

root
├── img
├── scss
└── sprites
      ├── foo
      │    ├── foo-icon-01.svg
      │    └── foo-icon-02.svg
      ├── bar
      │    ├── bar-icon-01.svg
      │    └── bar-icon-02.svg
      └── baz
           ├── baz-icon-01.svg
           └── baz-icon-02.svg

After Directory Structure

root
├── img
│    ├── sp_foo.svg
│    ├── sp_bar.svg
│    └── sp_baz.svg
├── scss
│    ├── sp_foo.scss
│    ├── sp_bar.scss
│    └── sp_baz.scss
└── sprites
      ├── foo
      │    ├── foo-icon-01.svg
      │    └── foo-icon-02.svg
      ├── bar
      │    ├── bar-icon-01.svg
      │    └── bar-icon-02.svg
      └── baz
           ├── baz-icon-01.svg
           └── baz-icon-02.svg