mini-icon

Build SVG icons into CSS mask classes, an SVG sprite, and TypeScript union types.

Install

npm install mini-icon

CLI

Add to package.json:

{
  "scripts": {
    "icons": "mini-icon"
  }
}

Run:

npm run icons

Config

Create mini-icon.config.js in your project root:

export default {
  iconsDir: "_icons",
  spriteOut: "public/icons.svg",
  cssOut: "src/icons.css",
  typesOut: "src/types/icon.ts",
  htmlFile: "index.html",
  injectSpriteLink: true,
  spriteHref: "/icons.svg",
};

JSON config (mini-icon.config.json) is also supported.

CLI flags

mini-icon --icons-dir assets/icons --css-out src/icons.css
mini-icon --cwd ./apps/web
mini-icon --inject-html --html-file index.html

Programmatic API

import { buildIcons } from "mini-icon";

const result = buildIcons({
  cwd: process.cwd(),
  iconsDir: "_icons",
  spriteOut: "public/icons.svg",
  cssOut: "src/icons.css",
  typesOut: "src/types/icon.ts",
});

console.log(result.names);

Usage in HTML

Put SVG source files in _icons/ (or your configured folder), then:

<link rel="preload" href="/icons.svg" as="image" type="image/svg+xml" />

@import "./icons.css";

<i class="icon search-lg"></i>

Color follows currentColor.

License

MIT