unplugin-iconfiy

iconify 本地化插件，按需加载，生产环境无需请求远程 icon

实现

参考 vite-plugin-svg-icons-ng，不过 vite-plugin-svg-icons-ng 是将本地文件 svg 通过到页面，然后通过 use 引入，unplugin-iconify 通过识别项目中使用到的 iconify icon，将用到的 icon 提取出来注入页面，通过 use 引入

使用

npm i unplugin-offline-iconify -D

配置项

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | cwd | string | 'src' | 扫描的根目录 | | include | string \| string[] | '**/*.{js,jsx,ts,tsx,vue,json,astro}' | 扫描的文件匹配模式 | | exclude | string \| string[] | [] | 额外排除的文件匹配模式（node_modules 已默认排除） |

Vite

目前仅测试了 Vite，并实现了 Vite 的 HMR 热更新支持。其他构建工具（Webpack、Rollup 等）理论上可用，但未经测试。

以 vite + react 为例

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Icon from 'unplugin-offline-iconify/vite'

export default defineConfig({
  plugins: [
    react(),
    // 使用默认配置
    Icon(),
    // 或者自定义配置
    // Icon({
    //   cwd: 'src',
    //   include: '**/*.{js,jsx,ts,tsx,vue,json}',
    //   exclude: ['**/test/**'],
    // }),
  ],
})

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import 'virtual:offline-iconify'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Icon 组件封装

以 React 为例封装 Icon 组件，其余框架也类似：

export default function Icon(props) {
  return (
    <svg style={{
      fontSize: props.size || '16px',
      color: props.fill,
      width: '1em',
      height: '1em',
    }}>
      <use xlinkHref={'#' + props.name} />
    </svg>
  )
}

在其他组件里引用：

import Icon from './component/Icon.jsx'

function App() {
  return (
    <div>
      <Icon name="ant-design:account-book-twotone" size="40px" fill="red" />
    </div>
  )
}

效果