Vue 3使用 Iconify 作为图标库与图标离线加载的方法、 Icones 开源在线图标浏览库的使用

之前一直naive-ui搭配使用的是xicons,后来发现Iconify支持的图标合集更多,因此转而使用Iconify。

与FontAwesome不同的是,Iconify配合Icones相当于是一个合集,Iconify提供了快捷引入图标的方式,而Icones是一个大的图标库,收集了大量MIT协议、Apache 2.0开源的图标文件。

Iconify 支持的框架很多,本文以 Vue 3 作为介绍。

官网地址:

https://icones.js.org/

Iconify Design: All popular icon sets, one framework.

一、安装

bash 复制代码
npm install --save-dev @iconify/vue

如果使用yarn作为依赖管理,则使用

bash 复制代码
yarn add --dev @iconify/vue

二、在 Icones 查找所需的图标

选择一个准备使用的图标套装,找到需要的图标后,点击复制:

三、插入图标

javascript 复制代码
import { Icon } from '@iconify/vue';


// template中插入
<Icon icon="mdi-light:home" />

效果:

四、离线加载

默认Iconify是在线加载的,访问有可能不稳定,很多时候私有化部署不能加载外网数据,因此我们需要离线加载,所幸的是Iconify并不是在线加载图标,而是在线加载元数据,因此,我们可以改为本地自动引入。

安装完整的图标集合(300MB左右)

复制代码
npm install --save @iconify/json

然后,安装Vite的图标自动引入插件

javascript 复制代码
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    Icons({}),
  ],
})

然后需要通过以下方式使用:

复制代码
import IconAccessibility from '~icons/carbon/accessibility'

模板内直接当组件使用即可,引入的前缀是~icons

比如上面mdi-light:home

javascript 复制代码
import IconMdl from '~icons/mdi-light/home'
 
                       <template #icon>
                          <IconMdl></IconMdl>
                        </template>
相关推荐
魔云连洲8 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年11 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒17 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku24 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing29 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042730 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说33 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567037 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试