tessl/npm-unplugin-icons

Access thousands of icons as components on-demand universally across multiple build tools and frameworks

—

Pending

Overview

Eval results

Files

Build Tool Integrations

Name: tessl/npm-unplugin-icons
Author: tessl

Framework-specific plugin instances for different build tools and environments, enabling unplugin-icons to work universally across the JavaScript ecosystem.

Capabilities

Vite Plugin

Plugin integration for Vite build tool.

/**
 * Vite plugin for unplugin-icons
 * @param options - Configuration options
 * @returns Vite plugin instance
 */
declare const VitePlugin: (options?: Options) => any;

Usage:

import { defineConfig } from "vite";
import Icons from "unplugin-icons/vite";

export default defineConfig({
  plugins: [
    Icons({
      compiler: "vue3",
      autoInstall: true,
    }),
  ],
});

Webpack Plugin

Plugin integration for Webpack build tool.

/**
 * Webpack plugin for unplugin-icons
 * @param options - Configuration options  
 * @returns Webpack plugin instance
 */
declare const WebpackPlugin: (options?: Options) => any;

Usage:

const Icons = require("unplugin-icons/webpack");

module.exports = {
  plugins: [
    Icons({
      compiler: "react",
      jsx: "react",
    }),
  ],
};

Rollup Plugin

Plugin integration for Rollup build tool.

/**
 * Rollup plugin for unplugin-icons
 * @param options - Configuration options
 * @returns Rollup plugin instance
 */
declare const RollupPlugin: (options?: Options) => any;

Usage:

import Icons from "unplugin-icons/rollup";

export default {
  plugins: [
    Icons({
      compiler: "svelte",
      scale: 1.2,
    }),
  ],
};

esbuild Plugin

Plugin integration for esbuild build tool.

/**
 * esbuild plugin for unplugin-icons
 * @param options - Configuration options
 * @returns esbuild plugin instance
 */
declare const EsbuildPlugin: (options?: Options) => any;

Usage:

import { build } from "esbuild";
import Icons from "unplugin-icons/esbuild";

build({
  plugins: [
    Icons({
      compiler: "jsx",
      jsx: "react",
    }),
  ],
});

Rspack Plugin

Plugin integration for Rspack build tool.

/**
 * Rspack plugin for unplugin-icons
 * @param options - Configuration options
 * @returns Rspack plugin instance
 */
declare const RspackPlugin: (options?: Options) => any;

Usage:

const Icons = require("unplugin-icons/rspack");

module.exports = {
  plugins: [
    Icons({
      compiler: "vue3",
      defaultClass: "icon",
    }),
  ],
};

Nuxt Module

Special integration for Nuxt framework with automatic configuration.

/**
 * Nuxt module for unplugin-icons with automatic setup
 * @param options - Configuration options
 * @param nuxt - Nuxt instance (optional)
 */
declare const NuxtModule: (options?: Options, nuxt?: any) => void;

Usage:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ["unplugin-icons/nuxt", {
      autoInstall: true,
    }],
  ],
});

Framework-Specific Examples

React + Vite

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import Icons from "unplugin-icons/vite";

export default defineConfig({
  plugins: [
    react(),
    Icons({
      compiler: "jsx",
      jsx: "react",
      defaultClass: "react-icon",
    }),
  ],
});

Vue 3 + Vite

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";

export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: "vue3",
      autoInstall: true,
      scale: 1.2,
    }),
  ],
});

Svelte + Vite

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import Icons from "unplugin-icons/vite";

export default defineConfig({
  plugins: [
    svelte(),
    Icons({
      compiler: "svelte",
      defaultStyle: "color: currentColor;",
    }),
  ],
});

React + Webpack

const path = require("path");
const Icons = require("unplugin-icons/webpack");

module.exports = {
  entry: "./src/index.js",
  plugins: [
    Icons({
      compiler: "jsx",
      jsx: "react",
      customCollections: {
        'local': require("unplugin-icons/loaders").FileSystemIconLoader(
          path.resolve(__dirname, "src/assets/icons")
        ),
      },
    }),
  ],
};

Vue 2 + Webpack

const { VueLoaderPlugin } = require("vue-loader");
const Icons = require("unplugin-icons/webpack");

module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    Icons({
      compiler: "vue2",
      autoInstall: true,
    }),
  ],
};

Solid + Rollup

import solid from "vite-plugin-solid";
import Icons from "unplugin-icons/rollup";

export default {
  plugins: [
    solid(),
    Icons({
      compiler: "solid",
      scale: 1.1,
    }),
  ],
};

Nuxt 3 Integration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ["unplugin-icons/nuxt", {
      compiler: "vue3", // Auto-detected for Nuxt 3
      autoInstall: true,
      customCollections: {
        'brand': require("unplugin-icons/loaders").FileSystemIconLoader(
          "./assets/brand-icons"
        ),
      },
    }],
  ],
});

Universal Configuration

// config.js - Works with any build tool
const Icons = (buildTool) => require(`unplugin-icons/${buildTool}`);

const iconConfig = {
  compiler: "vue3",
  autoInstall: true,
  defaultClass: "icon",
  customCollections: {
    'ui': require("unplugin-icons/loaders").FileSystemIconLoader("./src/icons"),
  },
};

// Usage examples:
// Vite: Icons('vite')(iconConfig)
// Webpack: Icons('webpack')(iconConfig)  
// Rollup: Icons('rollup')(iconConfig)

Build Tool Specific Features

Vite-Specific Features

import Icons from "unplugin-icons/vite";

export default {
  plugins: [
    Icons({
      // Vite supports HMR for icon changes
      compiler: "vue3",
      // Works with Vite's dev server
      autoInstall: true,
    }),
  ],
};

Webpack-Specific Features

const Icons = require("unplugin-icons/webpack");

module.exports = {
  plugins: [
    Icons({
      // Webpack integration supports all loaders
      compiler: "react",
      // Works with webpack-dev-server
      customCollections: {
        'assets': require("unplugin-icons/loaders").FileSystemIconLoader("./assets"),
      },
    }),
  ],
};

Nuxt-Specific Features

The Nuxt module provides additional automatic configuration:

Automatically detects Nuxt version and sets appropriate Vue compiler
Injects TypeScript definitions for Vue icon components
Configures both Webpack and Vite plugins automatically
Integrates with Nuxt's module system

// Automatically configured by Nuxt module:
// - compiler: 'vue3' for Nuxt 3+
// - TypeScript types: 'unplugin-icons/types/vue'
// - Both webpack and vite plugin setup

Install with Tessl CLI