打造属于自己的vue图标库

hfex-icon图标库

Install

npm i -D hfex-icon
1

主要提供2种使用方式

方式一

通过svg图标资源，借助unplugin-icons库将svg图标文件生成vue组件，然后通过vue组件的引入方式在vue中使用

unplugin-icons

兼容vue2和vue3

在vue.config.js的plugins中配置

Install unplugin-icons

npm i -D unplugin-icons
1

Webpack版本

const path = require('path')
const Icons = require('unplugin-icons/webpack');
const { FileSystemIconLoader } = require('unplugin-icons/loaders');
module.exports = {
  configureWebpack:{
    plugins:[
        Icons({
            compiler: vue2,//vue2或者vue3，看当前项目
            customCollections: {
                'hfex-icon': FileSystemIconLoader(path.join(process.cwd(), './node_modules/hfex-icon/icons'), svg =>
                    svg.replace(/^

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

Vite版本

import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
import path from 'path'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
export default defineConfig({
  plugins:[
    Icons({
    compiler: vue3,//vue2或者vue3，看当前项目
    customCollections: {
      'hfex-icon': FileSystemIconLoader(path.join(process.cwd(), './node_modules/hfex-icon/icons'), svg => {
        return svg.replace(/^

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

也可以通过hfex-icon-plugin 配置，hfex-icon-plugin是将以上plugin上的配置封装起来

Use with hfex-icon-plugin

Install

npm i hfex-icon-plugin -D
1

Usage

For example in Vue:

// vue.config.js
const HfexIconPlugin = require('hfex-icon-plugin/webpack')
module.exports = {
    configureWebpack:{
        plugins:[
            HfexIconPlugin()
        ]
    }
}
1
2
3
4
5
6
7
8
9

For example in Vite:

// vite.config.ts
import HfexIconPlugin from 'hfex-icon-plugin';
export default defineConfig({
    plugins:[
        HfexIconPlugin()
    ]
})
1
2
3
4
5
6
7

在vue入口文件引入注册组件

import HfexIcon from 'hfex-icon'
app.use(HfexIcon) //vue3
Vue.use(MfexIcon); //vue2

1
2
3
4

使用

1

效果展示

参数支持

方式二

配合unocss使用

Install unocss

npm install -D unocss
1

在vue入口文件引入

import 'uno.css'
1

在vue.config.js的plugins中配置

npm install -D @unocss/webpack
1

//vue.config.js
const UnoCSS = require('@unocss/webpack').default
const presetIcons = require('unocss').presetIcons
const presetUno = require('unocss').presetUno
const presetAttributify = require('unocss').presetAttributify

module.exports = {
  configureWebpack:{
    plugins:[
      UnoCSS({
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons({
            collections: {
              'hfex-icon': () => require('hfex-icon/iconify-json/hfex-icon.json')
            }
          })
        ]
      }),
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

vite中使用

//vite.config.ts
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
import Unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  plugins:[
      UnoCSS({
        presets: [
          presetUno(),
          presetAttributify(),
          presetIcons({
            collections: {
              'hfex-icon': () => require('hfex-icon/iconify-json/hfex-icon.json')
            }
          })
        ]
      }),
    ]
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用

1
2
3

效果展示

图标支持