一招手教你把iconfont做成vite插件，解锁新体验

2023-01-30 23:24:16

轻松集成 Iconfont：Vite 插件简化图标管理

在前端开发中，图标扮演着至关重要的角色。然而，使用传统的方法集成图标库往往会遇到一系列问题，如手动下载、代码冲突和无法按需引入。为了解决这些痛点，我们推出了一个 Vite 插件，让在 Vite 项目中使用 Iconfont 变得上更加轻松高效。

Iconfont 介绍

Iconfont 是一个海量的图标库，提供种类繁多的高品质图标。它受到前端开发者的广泛欢迎，但传统的使用方式存在一些局限性。

Vite 插件的优势

我们的 Vite 插件通过以下功能解决这些问题：

无需手动下载图标： 直接从 Iconfont 库中加载图标，省去人工下载的麻烦。
多人协作无冲突： 自动生成唯一的 CSS 类名，避免开发人员之间的代码冲突。
按需引入图标： 仅引入需要的图标，优化代码加载速度和减少包体积。

配置和使用

安装：

npm install vite-plugin-iconfont --save-dev

配置：

在 vite.config.js 中添加插件配置：

import { defineConfig } from 'vite'
import iconfont from 'vite-plugin-iconfont'

export default defineConfig({
  plugins: [
    iconfont({
      name: 'your-iconfont-name', // Iconfont 的项目名
      local: true, // 是否使用本地 svg 文件
      cdn: true, // 是否使用 CDN
      cdnUrl: '//at.alicdn.com/t/font_{your-iconfont-name}.js', // CDN 地址
      collections: ['your-collection-name'] // 使用到的字体集合
    })
  ]
})

使用：

在 HTML 或 Vue 组件中使用图标：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <i class="iconfont icon-your-icon"></i>
</body>
</html>

// main.js
import { createApp } from 'vue'

const app = createApp({
  template: `
    <div>
      <i class="iconfont icon-your-icon"></i>
    </div>
  `
})

app.mount('#app')