iconify-import-svg

Import local SVG files into Iconify JSON collections.

Install

pnpm add -D iconify-import-svg

Usage

Import a single collection

import { importSvgCollection } from 'iconify-import-svg'

const collection = importSvgCollection({
  source: './icons',
  includeSubDirs: true, // default: true
})

Import a directory tree as multiple collections

import { importSvgCollections } from 'iconify-import-svg'

const collections = importSvgCollections({
  source: './icons',
  prefix: 'custom',
})

// Example keys:
// custom-alerts
// custom-line-arrows

importSvgCollections creates one collection for each directory that directly contains .svg files. Key names are built from the relative directory path, joined with -.

Use with @egoist/tailwindcss-icons

import { iconsPlugin } from '@egoist/tailwindcss-icons'
import { importSvgCollections } from 'iconify-import-svg'

export default {
  plugins: [
    iconsPlugin({
      collections: {
        ...importSvgCollections({
          source: './path/to/your/public/icons',
          prefix: 'custom',
        }),
      },
    }),
  ],
}

Then you can use classes like i-custom-avatar-user.

What gets processed

• Cleans and validates each SVG with @iconify/tools
• Converts black to currentColor
• Removes white shapes
• Runs SVGO optimization
• Skips invalid SVGs with a warning instead of failing the entire import

License

MIT License © Stephen Zhou