README.zh_CN.md

@tomjs/vite-plugin-iconify

English | 中文

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

安装

# 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

使用说明

以 vue/react 项目为例

使用插件

vue示例

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示例

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'],
    }),
  ],
});

文档

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

参数

参数名	类型	默认值	说明
selector	string	'title'	标签选择器，注入IconifyProviders脚本添加在指定的标签后面
resources	string[]	[]	图标 API 地址，默认带上 https://api.iconify.design
rotate	number	750	使用下一个主机之前的超时时间（以毫秒为单位）
timeout	number	5000	API 查询被视为失败之前的超时时间（以毫秒为单位）
local	'boolean'|'IconifySet[]'|IconifyLocal[]	false	本地图标集配置

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/[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 sets 或 Icônes

IconifyLocal

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

参数名	类型	默认值	说明
sets	IconifySet[]	[]	iconify 图标集
base	string	'/'	同 vite 配置 base 选项
outDir	string	'dist'	本地输出目录, 默认同 vite 配置 build.outDir 选项
path	string	'npm/@iconify/json@{version}'	本地输出路径，对应模块url也会替换为该路径

使用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