purge-icon-vue3
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

🚀 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的全局组件)


  1. 使用iconify图标:
// xxx.vue 使用组件
<PurgeIcon icon="icon-park:subway" size="16" color="red" />
  1. 使用iconfont图标: type指定iconfont
// main.ts 适当的地方引入iconfont的字体图标文件
import './assets/iconfont/iconfont.css';

// xxx.vue 使用组件
<PurgeIcon type="iconfont" icon="icon-huocheditiezhantai" size="16" color="red" />
  1. 使用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" />
  1. 使用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函数

Readme

Keywords

none

Package Sidebar

Install

npm i purge-icon-vue3

Weekly Downloads

1

Version

0.0.6

License

MIT

Unpacked Size

111 kB

Total Files

12

Last publish

Collaborators

  • achengyu