Skip to content

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

License

Notifications You must be signed in to change notification settings

tomjs/vite-plugin-iconify

Repository files navigation

@tomjs/vite-plugin-iconify

npm node-current (scoped) NPM Docs

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

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:

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