Theme Tools plugin for Font Icons.
npm install @theme-tools/plugin-icon-font> Theme core plugins let you easily pass in configuration and get a set of Gulp-ready task functions back that have sensible defaults and work well together.
- Gulp 4 installed with npm install --save gulp@4
``bash`
npm install @theme-tools/plugin-icon-font --save
The config that is passed in is merged with config.default.js. We suggest starting with it to get started:
`bash`
cp node_modules/@theme-tools/plugin-icon-font/config.default.js config.icon-font.js
Add this to your gulpfile.js:
`js
const gulp = require('gulp');
const config = {};
config.iconFont = require('./config.icon-font.js');
const iconTasks = require('@theme-tools/plugin-icon-font')(config.iconFont);
gulp.task('icons', iconTasks.compile);
gulp.task('icons:clean', iconTasks.clean);
gulp.task('icons:watch', iconTasks.watch);
`
These tasks are methods inside iconTasks from the above code example. You can run them anyway you can run a function, though they are often ran via Gulp. All tasks take a callback function as the first and only parameter that will run when the task is done - exactly how gulp.task(), gulp.parallel(), and gulp.series() want.
Compile all svg files into a single icon font.
Watch files and recompile.
Clean compiled files.
All configuration is deep merged with config.default.js.
Type: String | Array Default: 'images/icons/src/*.svg
SVGs to work from.
Type: String Default: dest/
Where to write icon fonts
Type: Object
#### templates.enabled
Type: Boolean Default: false
If templates are turned on.
#### templates.sets
Type: Array
Each set is an object containing a src (String) and dest (String) from where to read a template from and where to write it to. These files will get handed info on the icons made. It can be used to create a Sass file so you can use the icons in mixins or can be used to create an HTML file that demos the icons. See Setting up Templates below for more info.
Here's some examples of templates that can be used:
`html`
{% glyphs.forEach((glyph) => { %}
{{ classNamePrefix }}--{{ glyph.name }}
{% }); %}
`scss
$icon-font-base-name: "{{ fontName }}";
$icon-font-path: "{{ fontPath }}";
$icon-font-class-prefix: "{{ classNamePrefix }}";
$font-icons: ({% glyphs.forEach((glyph) => { %}
{{ glyph.name }}: "\{{ glyph.content }}",{% }); %}
);
``
This is only info for other Theme Core plugin developers.
This event is emmited when files are done compiling. The first paramater is a String of the files changed.