如何在vue3+vite中优雅的使用iconify图标

server/2024/12/22 13:58:13/

前言

        从Vue2迁移到Vue3,在使用上有着很大的差别。本文的话主要是针对图标的使用差别上进行分析,同时给出基于iconify图标库中unplugin-icons的用法。这里特殊说明一下:其实element-plus中用到的图标也是基于iconify图标库的,在我们引入了unplugin-icons之后,进行下发一系列的配置之后,我们可以不单独引入element-plus的图标,同时还可以拥有海量的图标供你选中,这样一来,可以很舒服且优雅的使用图标~

unplugin-icons插件

        unplugin-icons插件的可信就是用来做svg Icon按需解析并加在的,同时它基于iconify图标支持按需访问上万图标。iconify 这个图标库能够作为 unplugin-icons 插件的数据源,是因为它真的很好用,此库内部有100+个图标集,每个图标集合都有成千上万中图标,所以非常齐全。

图标集:可以理解为一个模块,每个模块(图标集)下才是对应的图标文件

传送门:Open Source Icon Sets - Iconify

然后我们任意点开一个图标集下面的一个图标,我们主要关注点在下方圈起来的部分,其中冒号:之前的是图标集的名称,冒号:后面的是该图标的名称,下发会展开说明其具体用法

 

安装

npm i -D unplugin-icons

如何使用该插件并引入图标,那么不得不考虑该怎么使用,是安装iconify整个库呢?还是单独安装需要用到的库下的图标集?还是自动引入?想当然,肯定是自动引入是最为方便的使用方式啦。但是下面也会举例说明这几种使用方式

说明:不管是全局引入还是单个图标集引入,在生产环境打包的时候只会打包你使用到的图标

手动安装所有图标集

npm i -D @iconify/json

注意:这个库大约在120mb左右,安装过程肯定会有点慢的...(所以不推荐这种方式)

手动安装指定图标集

npm i -D @iconify-json/xxx

xxx:图标基的名称,安装时进行相应的替换即可(如何查看图标集的名称?忘记的小伙伴可以动动小指头向上拉,会有你想要的结果~)

自动安装图标集

如果觉得上述两种方式使用都不够优雅。没关系,插件还支持自动安装图标集,非常简单,只需要进行如下配置即可:(这里以vue3+vite为例)

javascript">// icon 插件
import Icons from "unplugin-icons/vite"export default defineConfig({plugins:[Icons({compiler: 'vue3',// 指定编译器autoInstall: true,// 自动安装})]
)}

如上,只要我们在配置中传入 autoInstall 属性为 true 就 ok 了,插件就会在检测到我们引入一个图标时自动去下载该图标集,这样就省事多了。

自动安装图标集使用方式

<template><h1>引入iconify图标</h1><IconIcBaselineBampaign /><el-icon :size="24" color="#409eff"><IconIcBaselineBampaign /></el-icon>
</template>
<script setup lang="ts">
import IconIcBaselineBampaign from '~icons/ic/baseline-campaign'
</script><style scoped>
</style>

当我们配置了自动安装之后,在写完代码保存时,插件就会检测到并同个包管理工具自动安装ic图标集了。同时,观察仔细地小伙伴也可以发现,上述示例了两种用法,其一是也可以搭配ElementPlus中地Icon使用,这样一来,修改图标样式也非常方便,不需要另外定义class名进行更改。

咋一看,上面的自动安装方式引入图标,也算挺方便。但是!接下来要介绍的是,终极的使用方式,那就是自动引入,即我们在使用的时候,不在需要import这个动作,而是根据自己配置的一定的规则,直接在模板上进行使用。

自动引入

在这里,需要另外一个插件的配合, unplugin-vue-components ,该插件的作用是给Vue提供自动引入组件的功能,支持Vue2和Vue3开箱即用,同时支持组件和指令,也支持 Vite、Webpack、VueCLI、Rollup、ESbuild。最重要的是,它和 unplugin-icons 完美契合。

安装

npm i unplugin-vue-components -D

对于自动引入插件,对于我们内部定义的组件,只需要将进行如下配置,则在引入我们自定义的组件时则不需要import,直接使用即可

javascript">const Components = require('unplugin-vue-components/webpack')....plugins[// 使用自动引入插件Components({ /** options **/ }),]

但是对于我们上述所说的Icon组件,由于时外部引入的组件,我们就需要配置它独有的解析器。其中,unplugin-icons为我们提供了一个unplugin-icons/resolver 包,这个包的作用时处理Iconi相关的自动引入解析的,即Icon自动引入解析器。具体配置如下:

javascript">// vite.config.ts
import { ElementPlusResolver,VueUseComponentsResolver,VueUseDirectiveResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import Icons from "unplugin-icons/vite"
// icon 自动引入解析器
import IconsResolver from "unplugin-icons/resolver"
// icon 加载 loader
import { FileSystemIconLoader } from "unplugin-icons/loaders"export default defineConfig({plugins: [vue(),Components({//imports指定组件所在目录,默认为src/componentsdirs: ['src/components', 'src/views'],//需要去解析的文件include: [/\.vue$/, /\.vue\?vue/, /\.md$/],resolvers: [ElementPlusResolver(),VueUseComponentsResolver(),VueUseComponentsResolver(),VueUseDirectiveResolver(),IconsResolver({// 自动引入的Icon组件统一前缀,默认为icon,设置false为不需要前缀prefix: 'icon',// 当图标集名字过长时,可使用集合别名alias: {system: 'system-uicons'},})]}),Icons({ compiler: 'vue3',autoInstall: true,})]
})

启动项目,我们就可以直接使用图标组件无需引入了.

注意:使用图标组件解析器时,必须遵循名称转换才能正确推断图标,也就是说想要自动引入 Icon 组件,我们必须按照下面格式书写组件名:

javascript">// prefix - 前缀,默认为 i,上面我们配置成了 icon,即组件名以 icon 开头
// collection - 图标集名
// icon - 图标名
{prefix}-{collection}-{icon}// 当然大驼峰也可以,下面是用的就是大驼峰,因为看着顺眼

使用

注意:上面使用方式中微小的差异,即向输入框中插槽的方式使用icon,则需要单独同个插槽的方式使用。

嘿嘿,经过上面配置,已经可以很舒服的使用图标了。但是针对有时候UI设计不按套路走,一定要使用其设计的图标,这个时候我们就需要引入自定义图标了,同个保存在本地,导入使用的方式呈现。其中,自定义的图标引入也是支持自动引入的,我们进行如下配置

自定义图标自动引入

准备工作:

1.在src/assets目录下新增svg/目录(这步可以按照自身习惯),我们可以按照iconify的方式,按照模块在svg/下建不同的文件夹,这些文件夹用来存放我们自定义的svg图标文件。

上面是我建立的几个目录,接下来我们来配置自定义图标的加载。

配置

unplugin-icons插件中有一个customCollections的属性,用来自定义图标的加载。但是由于我们需要引入svg文件,所以还需要一个svg文件的解析的loader,这点插件也为我们考虑到了,unplugin-icons插件包下就有这个loader,我们直接引入使用接口,如下:

上面这个配置使得我们可以引入自定义svg并进行使用。插件帮我们进行识别从而进行加载。当然,我们肯定是想要一步到位的配置,即跟引入iconify图标一样,使用自动引入的方式,即不需要import的这个步骤,而是直接在页面上使用。那么就需要继续进行如下配置:

自定义的图标集想要自动引入,需要在Icon自动引入解析器( IconsResolver )的配置中使用customCollections 属性标记出自定义的图标集模块名

上面我定义了两个目录(模块),且想要使用这两个目录下的图标是,我们需要将这两自定义的图标集的名字传进去,让自动引入插件可以识别并解析即可:

javascript">// vite.config.ts
import { ElementPlusResolver,VueUseComponentsResolver,VueUseDirectiveResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import Icons from "unplugin-icons/vite"
// icon 自动引入解析器
import IconsResolver from "unplugin-icons/resolver"
// icon 加载 loader
import { FileSystemIconLoader } from "unplugin-icons/loaders"export default defineConfig({plugins: [vue(),Components({//imports指定组件所在目录,默认为src/componentsdirs: ['src/components', 'src/views'],//需要去解析的文件include: [/\.vue$/, /\.vue\?vue/, /\.md$/],resolvers: [ElementPlusResolver(),VueUseComponentsResolver(),VueUseComponentsResolver(),VueUseDirectiveResolver(),IconsResolver({// 自动引入的Icon组件统一前缀,默认为icon,设置false为不需要前缀prefix: 'icon',// 当图标集名字过长时,可使用集合别名alias: {system: 'system-uicons'},// 标识自定义图标集customCollections: ['home', 'menu'],})]}),Icons({ compiler: 'vue3',autoInstall: true,})]
})

使用 

注意:图标的命名方式也是和iconify一样,即我们在配置文件中配置的一样,使用icon-模块-图标名 ,其中使用驼峰命名或者-分隔命名都是可以的。<IconHomeBar1/>和<icon-home-bar1/>的表现效果是一样的

总结

优点:

1.配置简单,使用方便,大量的图标可供选中

2.使用的svg方式,体积小

缺点:

1.在.vue文件中可以很舒服的使用,但是在js、ts文件例如我们定义的路由菜单栏图标,不能实现自动引入,只能使用import的方式使用,目前我也还没想到比较好的的方式

如果有小伙伴也在用这个插件,如有不足的地方或者补充欢迎评论哈~撒花~完结~


http://www.ppmy.cn/server/18334.html

相关文章

JS设置Ajax为同步或异步

在使用 AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;时&#xff0c;可以通过设置 XMLHttpRequest 对象的 async 属性来控制请求是同步&#xff08;synchronous&#xff09;还是异步&#xff08;asynchronous&#xff09;。 异步&#xff08;Asynchronous&…

C语言:一维数组、二维数组、字符数组介绍

数组 介绍一维数组定义应用方法初始化 举例示例结果 二维数组定义应用方法初始化 举例示例结果 字符数组定义应用方法初始化 举例示例结果分析 介绍 在C语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储一系列相同类型的数据。数组可以是多维的&#xff0c;最…

光伏无人机巡检技术对光伏电站运维的重要性

在光伏电站的运维和企业管理中&#xff0c;提高效益和降低成本一直是关注焦点。传统的巡检过度依赖人力&#xff0c;又因为光伏电站往往跨区建设&#xff0c;在去往电站路上浪费大量时间&#xff0c;造成了时间的浪费。当然也有部分光伏企业选择售后外包&#xff0c;但是这样会…

优雅实现uniapp返回上一页传参

在移动端应用中&#xff0c;表单设置组件往往作为独立的页面层级存在&#xff0c;以实现如时间选择等复杂功能。当用户在该组件页面内选定特定时间后&#xff0c;如何将这一选择结果高效、有序地传递回原页面&#xff0c;成为一个颇具挑战性的任务。尽管可以借助Vuex进行全局状…

MATLAB初学者入门(19)—— 均值算法

均值算法通常指的是算法中用于计算数据的平均值或中心点的方法&#xff0c;尤其在处理统计数据或机器学习中的聚类问题时。在聚类的上下文中&#xff0c;均值算法通常与K均值聚类算法&#xff08;K-means clustering algorithm&#xff09;相关。K均值是一种简单而广泛使用的聚…

03 后端入参校验:自定义注解实现

03 后端入参校验&#xff1a;自定义注解实现 一、前言二、实现1、新建Spring Boot项目2、引入依赖3、新建注解类4、新建校验器5、全局异常处理器6、编写Controller7、新建实体类8、启动并测试 一、前言 在 Java 后端开发中&#xff0c;为了实现入参校验&#xff0c;常常会使用…

Swift 中的条件语句:if 和 else

在 Swift 编程语言中&#xff0c;条件语句 if 和 else 是控制程序流程的重要工具。它们允许我们根据不同的条件执行不同的代码块&#xff0c;从而实现更灵活的程序逻辑。 if 语句 if 语句用于执行一个代码块&#xff0c;当指定的条件为真时。其基本语法如下&#xff1a; if …

OpenSceneGraph

文章目录 关于 OpenSceneGraphScreenshots - OpenMW 关于 OpenSceneGraph 官网&#xff1a;https://openscenegraph.github.io/openscenegraph.io/github : https://github.com/openscenegraph/OpenSceneGraphClasses : https://podsvirov.github.io/osg/reference/opensceneg…