@tomjs/vite-plugin-iconify

English | 中文

A Vite plugin for handling iconify icon sets in environments without internet access.

Install

# pnpm
pnpm add @iconify/json @tomjs/vite-plugin-iconify -D

# yarn
yarn add @iconify/json @tomjs/vite-plugin-iconify -D

# npm
npm i @iconify/json @tomjs/vite-plugin-iconify --save-dev

Usage

Using Vue/React projects as examples:

Using the plugin

Vue Example

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import iconify from '@tomjs/vite-plugin-iconify';

export default defineConfig({
  plugins: [
    vue(),
    iconify({
      resources: ['https://unpkg.com/@iconify/json/json'],
      rotate: 3000,
      local: ['ant-design', 'ep'],
    }),
  ],
});

React Example

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import iconify from '@tomjs/vite-plugin-iconify';

export default defineConfig({
  plugins: [
    react(),
    iconify({
      resources: ['https://unpkg.com/@iconify/json/json'],
      rotate: 3000,
      local: ['ant-design', 'ep'],
    }),
  ],
});

Documentation

• index.d.ts provided by unpkg.com.

Parameters

Parameter	Type	Default	Description
selector	string	'title'	The tag selector to inject the IconifyProviders script after
resources	string[]	[]	Icon API URLs, default includes https://api.iconify.design
rotate	number	750	Timeout in milliseconds before using the next host
timeout	number	5000	Timeout in milliseconds before an API query is considered failed
local	'boolean'|'IconifySet[]'|IconifyLocal[]	false	Local icon set configuration

resources: You can add npm cdn or custom url:

• npmmirror:
  • https://registry.npmmirror.com/@iconify/json/{version}/files/json
  • https://registry.npmmirror.com/@iconify/json/latest/files/json
  • https://registry.npmmirror.com/@iconify/json/2.2.187/files/json
• jsdelivr:
  • https://cdn.jsdelivr.net/npm/@iconify/json@{version}/json
  • https://cdn.jsdelivr.net/npm/@iconify/json/json
  • https://cdn.jsdelivr.net/npm/@iconify/[email protected]/json
• unpkg:
  • https://unpkg.com/@iconify/json@{version}/json
  • https://unpkg.com/@iconify/json/json
  • https://unpkg.com/@iconify/[email protected]/json

IconifySet

Iconify icon set, refer to icon sets or Icônes

IconifyLocal

By configuring this parameter, the local icon set will be copied to the outDir directory based on the sets configuration.

Parameter	Type	Default	Description
sets	IconifySet[]	[]	Iconify icon sets
base	string	'/'	Same as the base option in Vite configuration
outDir	string	'dist'	Local output directory, default is the same as the build.outDir option in Vite configuration
path	string	'npm/@iconify/json@{version}'	Local output path, the corresponding module URL will also be replaced with this path

Using CLI

Generate Iconify icon set data for icon selection and other functionalities.

• Add the following script to package.json under scripts : ti ant-design ep --path src/constants
• Or run the following command directly: pnpm ti ant-design ep --path src/constants

Usage:
  $ ti [...sets]

Commands:
  [...sets]  create icon collection data based on @iconify/json in the project

For more info, run any command with the `--help` flag:
  $ ti --help

Options:
  --path <path>  [string] output file path. (default: src)
  --name <name>  [string] output file name. if tsconfig is exists, default is 'iconify.ts', or is 'iconify.js'
  --type <type>  ["esm" | "cjs"] output file type. (default: esm)
  -h, --help     Display this message
  -v, --version  Display version number

Development

• Development requirements:

  • git
  • node>=16
  • pnpm>=8

• For the first time, install dependencies by running the following command:

# Install dependencies
pnpm i
# build library
pnpm build

• To debug the vue project, execute the following commands:

cd examples/vue
pnpm build
pnpm preview

• To debug the react project, execute the following commands:

cd examples/react
pnpm build
pnpm preview