-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Vittorio Vittori edited this page Feb 24, 2022
·
4 revisions
Iconsauce is a CSS build tool that ensures a tiny CSS font icon build, which keeps only the glyphs used by your code.
npm i --save-dev @iconsauce/core
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',
},
],
}
<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>
@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!