湖南响应式网站建设哪家有,企业网络营销策划必须以什么为核心,购物网站排版设计,英德住房和城乡建设部网站之前一直naive-ui搭配使用的是xicons#xff0c;后来发现Iconify支持的图标合集更多#xff0c;因此转而使用Iconify。
与FontAwesome不同的是#xff0c;Iconify配合Icones相当于是一个合集#xff0c;Iconify提供了快捷引入图标的方式#xff0c;而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.
一、安装
npm install --save-dev iconify/vue
如果使用yarn作为依赖管理则使用
yarn add --dev iconify/vue二、在 Icones 查找所需的图标 选择一个准备使用的图标套装找到需要的图标后点击复制 三、插入图标
import { Icon } from iconify/vue;// template中插入
Icon iconmdi-light:home /效果
四、离线加载
默认Iconify是在线加载的访问有可能不稳定很多时候私有化部署不能加载外网数据因此我们需要离线加载所幸的是Iconify并不是在线加载图标而是在线加载元数据因此我们可以改为本地自动引入。
安装完整的图标集合300MB左右
npm install --save iconify/json
然后安装Vite的图标自动引入插件
import Icons from unplugin-icons/viteexport default defineConfig({plugins: [Icons({}),],
})
然后需要通过以下方式使用
import IconAccessibility from ~icons/carbon/accessibility
模板内直接当组件使用即可引入的前缀是~icons
比如上面mdi-light:home
import IconMdl from ~icons/mdi-light/hometemplate #iconIconMdl/IconMdl/template
