1.0.3 • Published 5 years ago
easy-spriter v1.0.3
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