rollup-plugin-iconify-svg

2.2.4 verified Mon Apr 27 auth: no javascript

A Rollup plugin that automatically generates SVG markup from Iconify icon references in Svelte projects. Version 2.2.4. It scans source files for Iconify syntax (e.g., 'fa:random'), fetches SVG data from the Iconify API, and bundles the icons into your app. Offers both JS object output and experimental SVG file output. Provides options for recursive search, logging, and always-save mode. Differentiators: offline-capable after initial fetch, no runtime API calls, and fast iteration compared to manual icon export.

Common errors

error Error: ENOENT: no such file or directory, open 'src/icons.js' ↓

cause Plugin tries to write to a directory that doesn't exist or lacks permissions.

fix

Ensure dest directory exists and is writable, e.g., 'src/'

error Error: Network request to Iconify API failed ↓

cause No internet connection or API endpoint unreachable.

fix

Check internet connection; consider caching responses or using offline fallback.

error Error: Could not resolve 'rollup-plugin-iconify-svg' (did you mean 'rollup-plugin-iconify-svg'?) ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install rollup-plugin-iconify-svg --save-dev'

Warnings

gotcha Watch mode can cause infinite rebuilds if dest file is within watched src directory. ↓

fix Add dest file to watch exclude: watch: { exclude: ['src/icons.js'] }

gotcha Plugin relies on Iconify API; no internet connection will cause build failure. ↓

fix Ensure network access or cache API responses. Use alwaysSave: true to force refresh.

gotcha The plugin writes a .js file to disk; ensure write permissions in dest directory. ↓

fix Check file system permissions or adjust dest path.

gotcha If using livereload, you may need to add a delay to allow icons file to be created. ↓

fix Add livereload({ watch: 'public', delay: 1000 })

gotcha CommonJS mode (commonJs: true) is deprecated; prefer ESM imports. ↓

fix Use default ESM import; set commonJs: false.

Install

npm install rollup-plugin-iconify-svg

yarn add rollup-plugin-iconify-svg

pnpm add rollup-plugin-iconify-svg

Imports

default

wrong

const rolluppluginiconifysvg = require('rollup-plugin-iconify-svg')

correct

import rolluppluginiconifysvg from 'rollup-plugin-iconify-svg'

Plugin is ESM-only; requires use of import. CommonJS require will not work.

Quickstart

Shows setup in rollup.config.js with a single target to generate src/icons.js from src.

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import rolluppluginiconifysvg from 'rollup-plugin-iconify-svg';

export default {
  input: 'src/main.js',
  output: {
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    rolluppluginiconifysvg({
      targets: [{ src: 'src', dest: 'src/icons.js' }]
    }),
    svelte(),
    resolve({ browser: true }),
    // ... other plugins
  ]
};