Vite、Vue3离线、无网络使用 Iconify 图标（直接上手）

作者GitHub：https://github.com/gitboyzcf 有兴趣可关注！！！

前言

iconify.design 是一个超过20万个开源矢量图标库。
官网 👉 https://iconify.design/（英）
官网图标集 👉 https://icon-sets.iconify.design/

安装

安装图标相关包 这里使用pnpm

pnpm add -D @iconify/iconify @iconify/json unplugin-icons/vite

配置vite.config

import Icons from 'unplugin-icons/vite'
// ...


export default ({ mode, command }) => {
  // const env = loadEnv(mode, process.cwd())
  return defineConfig({
  	// ...
    plugins: [
      // ...
      Icons({}),
      // ...
    ],
    // ...
}

在图标集中选择图标使用

搜索 只支持英文

1. 找到对应图标选择自动导入
   

2. 复制下面代码
   

3. 在项目中引入使用

   <script setup>
   import FlowbiteVueSolid from '~icons/flowbite/vue-solid';
   
   </script>
   
   <template>
     <FlowbiteVueSolid color="#f00" width="100" height="100"/>
   </template>
   

4. 结果
   

将电脑网络关闭刷新页面也可以正常显示

归纳整理项目图标

创建全局组件 Icon.vue

Icon.vue

<template>
  <component :is="iconCom"></component>
</template>
<script setup>
import FlowbiteVueSolid from '~icons/flowbite/vue-solid'
import WpfPanorama from '~icons/wpf/panorama'
// ...


const props = defineProps({
  icon: {
    type: String
  }
})

const iconCom = shallowRef(null)
onMounted(() => {
  switch (props.icon) {
    case 'flowbite:vue-solid':
      iconCom.value = FlowbiteVueSolid
      break
    case 'simple-icons:insta360':
      iconCom.value = SimpleIconsInsta360
      break
   	// ...
    default:
      console.error(`${props.icon}需要到 src/components/Icon.vue 中配置改图标`)
      break
  }
})
</script>

使用

<Icon color="#f00" width="100" height="100"/>

！！！如有更好的归纳方式和方案，欢迎在下面评论！！！

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！