Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)

自留地第一锄,先把我每天 Cmd+C / Cmd+V 的图标方案刨出来,以后再也不用 ../assets/icon-xxx.svg 了。


1. 为什么选 Iconify

痛点 传统方案 Iconify 方案
图标源分散 阿里、Feather、Heroicons... 各装一个包 100+ 开源图标库 一个包全吃
编译体积 全量引入,打包 2 MB 按需 CDN,只下当前图标
使用成本 先下载 → 再放 assets → 再 import <iconify-icon icon="mdi:home" /> 一行搞定
可定制性 改颜色得开 Figma 直接 class="text-red-500" Tailwind 即玩

2. 一分钟上车

① 安装

bash 复制代码
# Vue3 官方组件
pnpm i @iconify/vue
# 如果还想离线,再装具体库(可选)
pnpm i @iconify-json/mdi

② 图标怎么找?

下面给出一份「从打开网页到把图标贴进代码」的完整动线,保证你 3 分钟就能搞定。


1️⃣ 打开官网

直达地址 → icon-sets.iconify.design/


2️⃣ 搜索图标

  1. 顶部搜索框输入关键词,例如 arrow
  2. 左侧可「按图标集过滤」:常用的是 mdiepcarbonri
  3. 看到中意的图标后点进去,会打开「详情抽屉」

3️⃣ 复制「图标名」

在抽屉里找到 Icon name 这一行,形如
mdi:chevron-right

点击右侧复制按钮即可------这就是你在代码里唯一需要填的字符串

ps:网站里面不好搜索的,不好找的图标 可以去:Yesicon - 精选全球高品质、开源、免费的矢量图标库 选中你想要的icon Vue 自动就会有 搭配 @iconify/vue 的哦,svg 、png 就更多啦~~

③ 最简裸用

xml 复制代码
<template>
  <Icon icon="mdi:home" class="text-2xl text-sky-600" />
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script>

3. 自封装 <SvgIcon> 组件(双版本)

🔷 TS 版(已自用)

typescript 复制代码
<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import { Icon } from '@iconify/vue'

interface Props { icon?: string }
defineProps<Props>()

const attrs = useAttrs()
const bindAttrs = computed(() => ({
  class: (attrs.class as string) || '',
  style: (attrs.style as string) || '',
}))
</script>

<template>
  <Icon :icon="icon" v-bind="bindAttrs" />
</template>

🔶 JS 版(无类型,直接抄)

xml 复制代码
<script setup>
import { useAttrs, computed } from 'vue'
import { Icon } from '@iconify/vue'

defineProps({ icon: String })
const attrs = useAttrs()
const bindAttrs = computed(() => ({
  class: attrs.class || '',
  style: attrs.style || '',
}))
</script>

<template>
  <Icon :icon="icon" v-bind="bindAttrs" />
</template>

4. 实战调用

xml 复制代码
<template>
  <!-- 知识库入口 -->
  <SvgIcon icon="garden:knowledge-base-26" class="text-2xl flex-1" />

  <!-- 带旋转动画 -->
  <SvgIcon icon="mdi:loading" class="animate-spin text-xl" />

  <!-- 行内按钮 -->
  <button class="btn">
    <SvgIcon icon="mdi:plus" /> 新建
  </button>
</template>

5. 踩坑小抄

  1. 图标不显示?

    检查图标名大小写 & 冒号:mdi:homeMdi:Home

  2. 离线模式

    生产内网无法访问 api.iconify.design 时,把所需图标提前打包:

    css 复制代码
    pnpm i @iconify-json/mdi

    然后在 main.js 注册:

    javascript 复制代码
    import { addCollection } from '@iconify/vue'
    import mdi from '@iconify-json/mdi/icons.json'
    addCollection(mdi)
  3. 颜色/尺寸

    Iconify 默认 width: 1em; height: 1em; 随字体走,直接改 text-*text-2xl 即可。

  4. SSR 白屏

    Nuxt3 记得加 @iconify/vuebuild.transpile



6. 结语

现在新建 .vue 文件,我第一件事就是敲 <SvgIcon icon="" />,图标焦虑彻底治好了。

如果你也有私藏图标小技巧,评论区互相种草,下次见 👋

相关推荐
子兮曰几秒前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪5 分钟前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo17 分钟前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip39 分钟前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.42 分钟前
Uni-App 页面跳转监控实战:快速定位路由问题
前端·网络·uni-app
码农学院1 小时前
MSSQL字段去掉excel复制过来的换行符
前端·数据库·sqlserver
颜酱2 小时前
实现一个mini编译器,来感受编译器的各个流程
前端·javascript·编译器
妄小闲2 小时前
网页源代码 企业网站源码 html源码网站
前端·html
Ares-Wang2 小时前
Vue3》》 ref 获取子组件实例 原理
javascript·vue.js·typescript