Generate CSS for icons with Iconify Utils
This method requires a bit of coding, using Node.js.
If you are not using Node.js or not comfortable with code below, consider other methods of generating CSS for icons.
Node.js
If you do not have a Node.js app, you need to create one to generate CSS.
There are plenty tutorials on how Node.js works, short version of steps:
- Install Node.js on your computer.
- Create directory for project, run npm init -y to create basic project.
Dependencies
You need to install 2 dependencies:
- @iconify/utils to install Iconify Utils that have function to generate CSS.
- @iconify/json to install data for all open source icon sets.
To install them, run
npm install --save-dev @iconify/utils @iconify/jsonBuild script
Process of building CSS is simple:
- Load icon set.
- Generate CSS for icons you need from that icon set.
- Save it to .css file.
js
import { readFile, writeFile } from 'node:fs/promises';
import { getIconsCSS } from '@iconify/utils';
import { locate } from '@iconify/json';
/**
* List of icons. Key is icon set prefix, value is array of icons
*
* @type {Record<string, string[]>}
*/
const icons = {
'mdi': ['home', 'menu'],
'mdi-light': ['alert-circle', 'circle', 'help-circle'],
};
// Parse each icon set
let code = '';
for (const prefix in icons) {
// Find location of .json file
const filename = locate(prefix);
// Load file and parse it
/** @type {import("@iconify/types").IconifyJSON} */
const iconSet = JSON.parse(await readFile(filename, 'utf8'));
// Get CSS
const css = getIconsCSS(iconSet, icons[prefix]);
// Add it to code
code += css;
}
// Save CSS file
await writeFile('assets/style.css', code, 'utf8');
console.log(`Saved CSS (${code.length} bytes)`);Change list of icons, location of .css file, run it to build CSS.
Usage
To use those icons in HTML, use <span> elements with 2 class names: class name for icon set, class name for icon.
html
<span class="icon--mdi-light icon--mdi-light--alert-circle"></span>Options
There are options for getIconsCSS() that you can use to customise generated CSS.