Write a plugin

Iconsauce plugins are meant to be added inside a iconsauce.config.js:

module.exports = {
  content: [
    './src/**/*.{tsx,ts}',
  ],
  fontSize: '24px',
  plugin: [
    require('@iconsauce/material-design-icons-updated'),
    require('@iconsauce/mdi-svg'),
    require('@iconsauce/mgg-icons'),
  ],
}

Plugins are basically a JavaScript object (or TypeScript) which is structured like this example:

{
  prefix: 'iconsauce',
  regex: {
    code: /(iconsauce)(\/{1}[0-9a-z-]+){1}/gm,
    lib: /([a-zA-Z_\-/]+\/([0-9a-zA-Z_-]+)\.svg)/,
  },
  selector: regexLib => `iconsauce/${regexLib[2].replace(/[_]+/g, '-')}`,
  path: './src/svg/*.svg',
}

Plugin properties

Property name	Type	Description
prefix	String	This is how you’ll trigger the icon: iconsauce/...
regex.code	RegEx	This is how you’ll write selectors: class="... iconsauce/icon-name ..."
regex.lib	RegEx	It’s used to isolate the icon name from the paths collected with path glob pattern.
selector	Function	This is how iconsauce will set icon names from original SVG to final CSS selectors, so from path/to/icon_name.svg to prefix/icon-name. The function has the param regex.lib results.
path	String	The path where icons SVG are located, It’s used by iconsauce to collect ALL SVG files inside a map, it uses the glob pattern with fast-glob module

Once you get how to write a plugin, you can simply add it to other plugins:

module.exports = {
  content: [
    './src/**/*.{tsx,ts}',
  ],
  fontSize: '24px',
  plugin: [
    require('@iconsauce/material-design-icons-updated'),
    require('@iconsauce/mdi-svg'),
    require('@iconsauce/mgg-icons'),
    {
      prefix: 'iconsauce',
      regex: {
        code: /(iconsauce)(\/{1}[0-9a-z-]+){1}/gm,
        lib: /([a-zA-Z_\-/]+\/([0-9a-zA-Z_-]+)\.svg)/,
      },
      selector: regexLib => `iconsauce/${regexLib[2].replace(/[_]+/g, '-')}`,
      path: './src/svg/*.svg',
    },
  ],
}