Create new icon font¶

To create a new icon font, you need to only create a js font file (must end with .font.js), e.g. myfont.font.js. Define relative to this file where your icons are stored and give it a font name

// assets/theme/fonts/myfont.font.js

module.exports = {
    'files': [
        '../icons/*.svg'
    ],
    'fontName': 'myfont-icons',
    'classPrefix': 'icon-',
    'baseSelector': '.icon',
    'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
    'fileName': 'fonts/[fontname].[hash].[ext]',
};

Now put your svg icons in the defined directory.

theme
├── fonts
│   ├── myfont.font.js
├── icons
│   ├── circle.svg
│   └── square.svg
└── base.js

To include the font to your project, you need to import it to your entrypoint.

// assets/theme/base.js

import '.fonts/myfont.font.js'

If you build your assets with webpack, the font and css file will be stored automatically to the build directory. Now you can use the icon font inside your html.

<span class="icon icon-circle"></span>

To get a html preview of all your icons you can generate the it with following command

$ yarn webfonts:generate --file assets/theme/fonts/myfont.font.js

Table Of Contents

Create new icon font¶