Skip to content
Vittorio Vittori edited this page Feb 24, 2022 · 4 revisions

Welcome to the wiki!

Iconsauce is a CSS build tool that ensures a tiny CSS font icon build, which keeps only the glyphs used by your code.

Installation

npm i --save-dev @iconsauce/core

Config

module.exports = {
  content: [
    './src/**/*.{tsx,ts,html}',
  ],
  fontSize: '24px',
  plugin: [
    require('@iconsauce/mdi-svg'),
    require('@iconsauce/material-design-icons-updated'),
    {
      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',
    },
  ],
}

Write some code

<p>
  Get all the SVG icons you need to a font icons CSS,
  from different node modules and directly inside your project.
</p>
<cmp-icon class="mdi/lock">Material Design Icons Community</cmp-icon>
<cmp-icon class="miu/filled/car">Material Design Icons Updated</cmp-icon>
<cmp-icon class="iconsauce/logo">Custom Icon</cmp-icon>

Build CSS

@font-face {
  font-family: "iconsauce";
  src: url("data:font/truetype;charset=utf-8;base64,A...Z") format("truetype");
}

[class^="mdi/"], [class*=" mdi/"], [class^="miu/"], [class*=" miu/"], [class^="iconsauce/"], [class*=" iconsauce/"] {
  font-family: "iconsauce";
  ...
}

.mdi\/lock::before { content: "\ea01" }
.miu\/filled\/car::before { content: "\ea02" }
.iconsauce\/logo::before { content: "\ea03" }

That's it!

Clone this wiki locally