1 | # gulp-svgmin
|
2 |
|
3 | [![Build Status](https://travis-ci.org/ben-eb/gulp-svgmin.svg?branch=master)][travis-status]
|
4 | [![NPM version](https://badge.fury.io/js/gulp-svgmin.svg)][npm-status]
|
5 | [![Dependency Status](https://david-dm.org/ben-eb/gulp-svgmin.svg)][deps-status]
|
6 |
|
7 | > A [Gulp][gulp-url] plugin to minify SVG files with [svgo-url].
|
8 |
|
9 | *If you have any difficulties with the output of this plugin, please use the [SVGO tracker][svgo-bugs].*
|
10 |
|
11 |
|
12 | ## Install
|
13 |
|
14 | With [npm][npm-url] do:
|
15 |
|
16 | ```
|
17 | npm install gulp-svgmin
|
18 | ```
|
19 |
|
20 | ## Example
|
21 |
|
22 | ```js
|
23 | import { src, dest } from 'gulp';
|
24 | import svgmin from 'gulp-svgmin';
|
25 |
|
26 | const defaultTask = () =>
|
27 | src('logo.svg')
|
28 | .pipe(svgmin())
|
29 | .pipe(dest('./out'));
|
30 |
|
31 | export default defaultTask;
|
32 | ```
|
33 |
|
34 | ## Configuration file
|
35 |
|
36 | By default, `gulp-svgmin` loads options from a `svgo.config.js` file in your project. See the [svgo’s configuration docs][svgo-config] for more info on how to write one.
|
37 |
|
38 | You can control which directory `svgo` searches for `svgo.config.js` with the `cwd` option. Or you can use a different file name with the `configFile` option.
|
39 |
|
40 | ```js
|
41 | import { src, dest } from 'gulp';
|
42 | import svgmin from 'gulp-svgmin';
|
43 |
|
44 | const defaultTask = () =>
|
45 | src('logo.svg')
|
46 | .pipe(svgmin({
|
47 | // Specify an absolute directory path to
|
48 | // search for the config file.
|
49 | cwd: '/users/admin/project/assets',
|
50 | // This path is relative to process.cwd()
|
51 | // or the 'cwd' option.
|
52 | configFile: 'images/svg/config.js',
|
53 | }))
|
54 | .pipe(dest('./out'));
|
55 |
|
56 | export default defaultTask;
|
57 | ```
|
58 |
|
59 | ## Options
|
60 |
|
61 | Instead of using a config file, you can pass an object of svgo’s options to the `gulp-svgmin` plugin. You will need to provide the config in comma separated objects, like the example below.
|
62 |
|
63 | ```js
|
64 | const defaultTask = () =>
|
65 | src('logo.svg')
|
66 | .pipe(svgmin({
|
67 | // Ensures the best optimization.
|
68 | multipass: true,
|
69 | js2svg: {
|
70 | // Beutifies the SVG output instead of
|
71 | // stripping all white space.
|
72 | pretty: true,
|
73 | indent: 2,
|
74 | },
|
75 | // Alter the default list of plugins.
|
76 | plugins: [
|
77 | // You can enable a plugin with just its name.
|
78 | 'sortAttrs',
|
79 | {
|
80 | name: 'removeViewBox',
|
81 | // Disable a plugin by setting active to false.
|
82 | active: false,
|
83 | },
|
84 | {
|
85 | name: 'cleanupIDs',
|
86 | // Add plugin options.
|
87 | params: {
|
88 | minify: true,
|
89 | }
|
90 | },
|
91 | ],
|
92 | }))
|
93 | .pipe(dest('./out'));
|
94 | ```
|
95 |
|
96 | You can view the [full list of plugins here][svgo-plugins].
|
97 |
|
98 | By default, the plugins list given to the gulp plugin will alter the default list of svgo plugins. Optionally, you can specify your plugins and set the `full` flag to `true` to indicate that your plugins list should not be merged with the default list of plugins.
|
99 |
|
100 | ```js
|
101 | const defaultTask = () =>
|
102 | src('logo.svg')
|
103 | .pipe(svgmin({
|
104 | multipass: true,
|
105 | // The plugins list is the full list of plugins
|
106 | // to use. The default list is ignored.
|
107 | full: true,
|
108 | plugins: [
|
109 | 'removeDoctype',
|
110 | 'removeComments',
|
111 | 'sortAttrs',
|
112 | // ...
|
113 | ],
|
114 | }))
|
115 | .pipe(dest('./out'));
|
116 | ```
|
117 |
|
118 | ## Per-file options
|
119 |
|
120 | To have per-file options, pass a function, that receives `file` object and
|
121 | returns `svgo` options. For example, if you need to prefix ids with filenames
|
122 | to make them unique before combining svgs with [gulp-svgstore][gulp-svgostore]:
|
123 |
|
124 | ```js
|
125 | const defaultTask = () =>
|
126 | src('src/*.svg')
|
127 | .pipe(svgmin(function getOptions(file) {
|
128 | const prefix = path.basename(
|
129 | file.relative,
|
130 | path.extname(file.relative)
|
131 | );
|
132 | return {
|
133 | plugins: [
|
134 | {
|
135 | name: 'cleanupIDs',
|
136 | parmas: {
|
137 | prefix: prefix + '-',
|
138 | minify: true,
|
139 | },
|
140 | },
|
141 | ],
|
142 | };
|
143 | }))
|
144 | .pipe(svgstore())
|
145 | .pipe(dest('./dest'));
|
146 | ```
|
147 |
|
148 | ## Contributing
|
149 |
|
150 | Pull requests are welcome. If you add functionality, then please add unit tests to cover it.
|
151 |
|
152 | ## License
|
153 |
|
154 | MIT © [Ben Briggs](https://beneb.info)
|
155 |
|
156 |
|
157 | [travis-status]: https://travis-ci.org/ben-eb/gulp-svgmin
|
158 | [deps-status]: https://david-dm.org/ben-eb/gulp-svgmin
|
159 | [npm-status]: https://badge.fury.io/js/gulp-svgmin
|
160 | [npm-url]: https://npmjs.org/package/gulp-svgmin
|
161 | [gulp-url]: https://github.com/gulpjs/gulp
|
162 | [gulp-svgostore]: https://github.com/w0rm/gulp-svgstore
|
163 | [svgo-url]: https://github.com/svg/svgo
|
164 | [svgo-bugs]: https://github.com/svg/svgo/issues
|
165 | [svgo-config]: https://github.com/svg/svgo#configuration
|
166 | [svgo-plugins]: https://github.com/svg/svgo#built-in-plugins
|