@tomjs/vite-plugin-iconify

@tomjs/vite-plugin-iconify

English | 中文

vite 插件，用于处理 iconify 图标集，可以在无法访问公网的环境下使用

安装

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

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

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

说明

• 根据需要安装 @iconify/json 或 @iconify-json/* 包
• 插件会先判断是否安装 @iconify/json，否则会读取 @iconify-json/*，并将 @iconify-json/*/icons.json 其复制到 @iconify/json/json/*.json

使用说明

以 vue/react 项目为例

使用插件

vue示例

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

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

react示例

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

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

文档

• unpkg.com 提供的 index.d.ts.

参数

resources: 你可以添加 npm cdn 或自定义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/json@2.2.187/json
• unpkg:
  • https://unpkg.com/@iconify/json@{version}/json
  • https://unpkg.com/@iconify/json/json
  • https://unpkg.com/@iconify/json@2.2.187/json

IconifySet

iconify 图标集，参考 icon sets 或 Icônes

IconifyLocal

配置该参数，会根据 sets 配置，将本地图标集复制到 outDir 目录下

使用cli

生成 iconify 图标集数据，用于图标选择等功能使用

• 以在 package.json 的 scripts 中添加 ti ant-design ep --path src/constants
• 直接运行 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

开发

• 开发环境

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

• 首次使用，需要安装依赖，执行如下命令

# 安装依赖
pnpm i
# 编译库
pnpm build

• 调试 vue 项目，执行如下命令

cd examples/vue
pnpm build
pnpm preview

• 调试 react 项目，执行如下命令

cd examples/react
pnpm build
pnpm preview