Icon guide

Add icon to enhavo

To add a icon to enhavo you simple need to put your svg icon into the assets/enhavo/icons directory

assets/enhavo
└── icons
    ├── circle.svg
    └── square.svg

Bind icon to unicode

For some cases you need to bind your icon to a unicode, so next time the font will be generated the unicode is not changed. Use the option codepoints in your .font.js file to bind the icon.

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

module.exports = {
    // .. other options
    'codepoints': {
        'circle': 0xf101,
        'square': 0xf102,
    }
}

With the --dump option you will get all codepoints, which are ready to copy and paste into the .font.js file.

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

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