打造属于自己的vue图标库

hfex-icon图标库

Install

复制代码
npm i -D hfex-icon

主要提供2种使用方式

方式一

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

unplugin-icons

兼容vue2和vue3

在vue.config.js的plugins中配置

Install unplugin-icons

复制代码
npm i -D unplugin-icons

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(/^<svg /, '<svg fill="currentColor" ')
                )
            }
        })
    ]
  }
}

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(/^<svg /, '<svg fill="currentColor" ')
      }

    )
  }
}),
]
})

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

Install

复制代码
npm i hfex-icon-plugin -D

在vue.config.js的plugins中配置(webpack)

vite版本待更新...

复制代码
const HfexIconPlugin = require('hfex-icon-plugin')
module.exports = {
    configureWebpack:{
        plugins:[
            ...HfexIconPlugin.plugins
        ]
    }
}

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

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

使用

复制代码
<hfex-icon name="home" color="#999" size="80px"/>

效果展示

参数支持

参数 类型 默认值
name string home
size string 28px
color string #000

方式二

配合unocss使用

Install unocss

复制代码
npm install -D unocss

在vue入口文件引入

复制代码
import 'uno.css'

在vue.config.js的plugins中配置

复制代码
npm install -D @unocss/webpack

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

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

使用

复制代码
<div class="i-hfex-icon:message w-80px h-80px bg-#cde6c7"></div>
<div class="i-hfex-icon:delete w-80px h-80px bg-#994405"></div>
<div class="i-hfex-icon:share w-80px h-80px bg-#cde6c7"></div>

效果展示

图标支持

相关推荐
持久的棒棒君2 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@3 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆4 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz4 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou05 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干5 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大5 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu5 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端6 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846956 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea