purge-icon-vue3

v0.0.6

Published

a year ago

> 🔥 该插件旨在能在项目中快速使用icon图标的一站式解决方案，包括我们常见的图片、svg、字体图标、iconify，便于项目不去在复杂应对管理各种各样的图标资源

Downloads

0High
0Medium
0Low

achengyu

🚀 Purge-Icon-Vue3

🔥 该插件旨在能在项目中快速使用icon图标的一站式解决方案，包括我们常见的图片、svg、字体图标、iconify，便于项目不去在复杂应对管理各种各样的图标资源

一、插件的背景和目标

背景 - 工程中使用图标的场景很多。从最早的图片、雪碧图 -> 字体图标 -> Symbol雪碧图，许多的的UI组件库也提供了内置的图标库，在vue3流行后UI组件库都选择了把图标分离为单独的依赖库，让图标的引用很麻烦。iconify的出现让不同组件库的图标使用更简单了.
目标 - 实现iconify图标引用，实现本地svg图标引用，实现iconfont图标引用.
鸣谢 - 该插件实现参考vite-plugin-purge-icons和vite-plugin-svg-icons两个库，特别感谢
声明 - 该插件旨在减化自己工作中重复工作的工具，实现原理简单，自身能力有限，使用者勿喷，如果有好的想法和建议也可在issue中提出

二、插件的注册

Install:

$ npm install purge-icon-vue3

Use in main.ts for register plugin:

createApp(App)
    .use(PurgeIconVue3)
    .mount('#app')

三、按插件使用(Purge-Icon-Vue3会自动注册一个PurgeIcon的全局组件)

使用iconify图标:

// xxx.vue 使用组件
<PurgeIcon icon="icon-park:subway" size="16" color="red" />

使用iconfont图标: type指定iconfont

// main.ts 适当的地方引入iconfont的字体图标文件
import './assets/iconfont/iconfont.css';

// xxx.vue 使用组件
<PurgeIcon type="iconfont" icon="icon-huocheditiezhantai" size="16" color="red" />

使用svg图标: type指定svg

/* 使用iconfont的Symbol集合 */

// main.ts 适当的地方引入iconfont的字体图标文件
import './assets/iconfont/iconfont.js';

// xxx.vue 使用组件
<PurgeIcon type="svg" icon="icon-huocheditiezhantai" size="16" />

/* 使用本地svg文件 */

// vite.config.ts 使用插件自动加载本地的svg文件，示例使用的是vite插件，其它打包器需找
// 到对应的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
    plugins: [
        createSvgIconsPlugin({
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
            symbolId: 'icon-[dir]-[name]'
        }),
    ]
})

// main.ts 引入注册代码
import 'virtual:svg-icons-register';

// xxx.vue 使用组件
<PurgeIcon type="svg" icon="icon-huocheditiezhantai" size="16" />

使用image图标: type指定image

import IconUrl from '@/assets/image/xxx.png';

// xxx.vue 使用组件
<PurgeIcon type="image" :icon="IconUrl" size="16" />

值得一说的是, webpack的项目中, 我们要在模板中引用一个图片很容易, 使用require函数就可以了, 不需要在js代码去操作
// xxx.vue 使用组件
<PurgeIcon type="image" :icon="require('@/assets/image/xxx.png')" size="16" />

但是在vite项目中动态引入图片就是一件很麻烦的事了, 我们可以手动实现一个vite版的require函数挂载到全局实例, 然后在模板上调用
// main.js
app.config.globalProperties['$require'] = (path: string) => {
  if (path.startsWith('@')) {
    const fileName = '.' + path.slice(path.lastIndexOf('@') + 1)
    return new URL(fileName, import.meta.url).href
  } else {
    return new URL(path, import.meta.url).href
  }
}

// xxx.vue 使用组件
<PurgeIcon type="image" :icon="$require('@/assets/image/xxx.png')" size="16" />

四、按组件使用

// xxx.vue 使用组件
import { PurgeIcon, IconSvg, Iconfont, Iconify, IconImage } from 'purge-icon-vue3';

<PurgeIcon type="svg" icon="icon-huocheditiezhantai" size="16" color="red" />
<IconSvg icon="icon-huocheditiezhantai" size="16" color="red" />
<Iconfont icon="icon-huocheditiezhantai" size="16" color="red" />
<Iconify icon="icon-huocheditiezhantai" size="16" color="red" />
<IconImage :icon="require('@/assets/image/xxx.png')" size="16" />

// purge-icon-vue3可以导出五个组件
PurgeIcon - 针对加载iconify图标, svg图标, iconfont图标, image图片图标
IconSvg - 针对加载svg图标
Iconfont - 针对加载iconfont图标
Iconify - 针对加载iconify图标
IconImage - 针对加载image图标

五、组件支持选项

| 选项 | 含义 | 类型 | 默认值 | 可选 | |-----------|----------|----------------|-----------|----------------------------| | type | 图标类型 | string | iconify | iconify、svg、iconfont、image | | icon | 图标引用 | string | - | - | | width | 图标宽度 | number, string | undefined | 优先级高于size | | height | 图标高度 | number, string | undefined | 优先级高于size | | size | 图标大小 | number, string | 16 | - | | color | 图标颜色 | string | - | - | | spin | 图标旋转动画 | boolean | false | true / false | | spinStyle | 图标旋转动画样式 | object | {} | |

    1. icon选项参数说明，Iconify引用名是图标名、Iconfont引用名是字体图标名，IconSvg引用名是`icon-${文件名}`，IconImage
       引用名是图片地址
    2. size、width、heigh参数说明，width、height的优先级高于size，存在值时优先取用，不存在时取用size来设置图标尺寸
    3. color参数说明，iconify图标, iconfont图标均是支持color选项，svg图标也支持color选项(但svg图标中写死了color颜色则选项不生效，需要自己修改源图标)，
       image图标不支持color选项就是一张img图片
    4. spin、spinStyle参数说明，spin是添加一个图标的旋转动画，这个还是比较实用功能用于制作加载等常见，spinStyle则是可以修改css旋转动画的参数

六、注意事项

    1. iconify图标本库已经做处理, 不需要安装其它依赖库可以直接使用, 可在此
       处('https://icon-sets.iconify.design/')查找对应的图标即可
    2. iconfont图标需要使用者自己在外部引入图标依赖文件, 具体使用参考iconfont
    3. svg本地图标文件, 要用户自己使用插件生成引入, 详参'vite-plugin-svg-icons'插件,
       需要注意的是插件生成的symbolId是`icon-${文件名}`, 原因是为了和iconfont symbol图标保持一致
    4. image图标需要接收的是图片路径参数，实际本身就是一个img标签，这里需要注意的是为了能在模板中快速动态引入图片资源，
       对于webpack工程提供了require函数能很好的引用图片地址，vite工程则需要自己编写一个require函数

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme