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="" />,图标焦虑彻底治好了。

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

相关推荐
best6663 小时前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东3 小时前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生3 小时前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙3 小时前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年3 小时前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|3 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞3 小时前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码3 小时前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码3 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d