1、使用 UI 组件库的图标
比如，在开发中，我们肯定会引入一个 UI库，比如
vue2 PC端常用的是element ui；Vue2 移动端常用的是vant UI；等等，他们都会有一个菜单时关于图标的
注意
element UI 这里 用的时class的方式，这个地方，也会在下面说到，一般在vue2中，常用的就是这种方式
2、使用阿里的iconfont字体图标
这个是在
vue2用的比较多的，操作方式也比较简单， 因为我们在使用 UI库的图标的时候，有可能不是很全面，有一些图标UI库里面可能没有，就需要引用阿里的字体图标了
1、点击这个网址打开，就会出现下面的这个界面 阿里的icon font字体图标官方网址
2、第二步可以搜索自己想要的图标，就会出现下面这样的界面，把鼠标移动上去 就会出现一个遮罩层，上面有加入购物车和下载，一般的话我们是先 加入购物车
3、选完自己想要的图标以后，可以按照下面这个图，进行操作。一般的话会新建一个自己的项目，把这些图标放到项目里面，然后一块下载，也可以不加入项目直接下载，点击 下载代码即可，这样会得到一个 压缩包文件
4、下面这个图，就是压缩包的内容，可以双击这个 demo_index.html ，这个是本地预览的文件，iconfont.css 这个也是比较重要的一个文件
5、会给出三种引入图标到自己项目中的方式，但常用的还是 font class，剩下的根据icon font的教程走就可以了
我们一般，在vue2 环境中会这么用，在 vue3 中有了新的使用方式
3、Iconify
Iconify 官方的解释是下面这样
翻译以下就是
iconify可以配合tailwind css、uno css、Vue、React等等
3.1 直接引入css 文件的方式
第一个链接是 iconify 官方的
引入 css 文件的官方文档
第二个链接是 iconify 官方支持的图标集
比如：我要引入这个图标集的2个图标
具体的操作步骤如下：
3.1.1 获取引入css文件地址
1、确定要引入
图标集的名称
2、https://api.iconify.design后面拼接上 /{prefix}.css?icons={icons}
prefix: 指的是你要引入的图标集，比如上面那个图，我要引入Material Symbols图标集，那么 prefix 就是这个值，注意空格用-替换icons：指的是你要引入的图标名称，如若出现多个，则逗号拼接。图标的名称看下面这个图
如若我想引入这个 10K 图标 和 1X ，那么
URL 地址=https://api.iconify.design/material-symbols.css?icons=10k,1x-mobiledata-badge
3.1.2 创建html 文件 引入css，使用图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://api.iconify.design/material-symbols.css?icons=10k,1x-mobiledata-badge">
</head>
<body>
<span class="icon--material-symbols icon--material-symbols--10k"></span>
<span class="icon--material-symbols icon--material-symbols--1x-mobiledata-badge"></span>
</body>
</html>
这样就可以使用这个图标了，如若后续在这个图标集下，添加了
新的图标，继续逗号拼接即可，但如若是不同的图标集，需要创建新的 URL，使用新的link 标签引入
3.1.3 指定class名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://api.iconify.design/material-symbols.css?icons=10k,1x-mobiledata-badge">
<link rel="stylesheet"
href="https://api.iconify.design/line-md.css?icons=account-add,account-delete&selector=.i-a-{name}::after&pseudo=1">
<!-- selector:.icon-{prefix}-{name}::after -->
<link rel="stylesheet"
href="https://api.iconify.design/line-md.css?icons=account-add,account-delete&selector=.i-abc-{name}">
</head>
<body>
<span class="icon--material-symbols icon--material-symbols--10k"></span>
<span class="icon--material-symbols icon--material-symbols--1x-mobiledata-badge"></span>
<hr>
<br>
<div>使用 ::after</div>
<span class="i-a-account-add"></span>
<br>
<div>不使用 ::after</div>
<span class="i-abc-account-add"></span>
</body>
</html>
selector：指定选择器名称，默认就是.icon--{prefix}--{name}，当然这里的prefix 可以换成自己想要的，一定要把{}删除，这个不需要pseudo：如若图标的选择是用了伪元素，这个选项需要设置为true / 1
还有其他的参数可以自己挖掘以下，在
参考链接章节，都有对应的文档
3.2 配合 Tailwind css 4
目前来说，css 原子化也是比较火， 最火的就是
tailwind.css，然后还有Unocss，这里我们以 Tailwind css 举例
3.2.1 创建一个 vite 项目
根据下面这个链接创建一个 vite 项目
3.2.2 vite中引入 Tailwind 4
这个步骤，也是按照官方走即可，官方文档的最后一步可以不用处理
官方文档：tailwindcss4.0 官方文档
3.2.3 安装 iconify 相关依赖
pnpm i @iconify/json @iconify/tailwind4
然后需要在 .css 文件 ，最好是和 tailwind 一个css 文件中，加入以下代码（如若
@import "tailwindcss";已经写了，则不需要重复写了）
@import "tailwindcss";
@plugin "@iconify/tailwind4";
在 app.vue中，使用
<span class="icon-[mdi-light--home]"></span>
<span class="icon-[material-symbols--10k]"></span>
3.3 配合 vue 使用
这个就比较简单了，下载依赖，引入依赖完事。
npm install --save-dev @iconify/vue
安装完成后，在 对应的 vue 文件中，
引入他的组件
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="mdi:home" />
<Icon icon="material-symbols:10k" />
<HelloWorld msg="Vite + Vue" />
</template>
这样就显示了，这个图标
注意：icon 属性的值的格式是这样的，provider 可以省略，但是 prefix 和 name 是要写的，中间用冒号分割
- prefix：图标集的名称
- name：图标的名称
3.4 iconify 和 vue 动态切换图标
在某些时候，我们还是需要动态的切换图标的，这个时候，iconify 搭配vue 就很好实现
<script setup>
import { ref } from "vue";
import { Icon } from "@iconify/vue";
const iconName = ref("logos:vue");
const toggle = () => {
iconName.value = iconName.value === "logos:vue" ? "logos:react" : "logos:vue";
};
</script>
<template>
<p>iconify 配合 vue 动态切换图标</p>
<button @click="toggle">动态切换图标</button>
<Icon :icon="iconName" />
<br />
</template>
4、icones
借助AI 的 定义：
icones是一个在线的图标浏览和搜索工具，专注于提供对Iconify图标集合的便捷访问。它允许开发者快速查找、预览和选择图标，并生成相应的代码片段，方便在项目中使用。
4.1 unplugin-icons
这个插件就是和 icones 配套的，也是 icones 官方推荐的引用方式之一
官方文档上说到：unplugin-icons 使用
iconify作为数据源。
4.1.1 安装
可以先通过
vite创建一个vue + TS项目，这里不做介绍，直接看vite 官方文档即可
默认从已创建项目开始
npm i -D unplugin-icons
4.1.2 引入
看官方文档上，你也可以继续安装
@iconify/json这个包，但是这个包 120MB (打包的时候，只会把你用到的，打包到生产版本中)
npm i -D @iconify/json
也可以按 图标集安装，我只需要用某个图标集
npm i -D @iconify-json/mdi
但是，更推荐另一种方式，
自动安装
autoInstall: true：它的作用是自动安装图标集合。当你在代码中使用了某个图标集合（例如 mdi:home），但该图标集合尚未安装时，unplugin-icons 会自动安装所需的图标集合。但第一次加载的时候，会稍微增加项目启动时间
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Icons from "unplugin-icons/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
Icons({
autoInstall: true, // 自动安装项目中用到的图标集合
// scale: 1.2, // 图标大小为 1.2em; 默认值是 1
// defaultStyle:"", // 默认值 空字符串; 设置默认css样式的
// defaultClass:"",// 默认值 空字符串; 设置默认 class 的
// compiler:"vue3",// 设置图标的编译方式，有 vue3/vue2/jsx/null,默认值是null
}),
],
});
比如，我要引入这个 图标，那么点击这个红色箭头，就会自动复制到自己电脑的剪切板上
<template>
<div>
<h3>unplugin-icons 自动引入所需图标</h3>
<Noto1stPlaceMedal />
</div>
</template>
<script setup lang="ts">
import Noto1stPlaceMedal from "~icons/noto/1st-place-medal";
</script>
<style scoped></style>
这里其实就验证了，autoInstall: true 这个属性的作用，项目刚刚启动的时候，确实会感觉到一丝的
慢
4.2 unplugin-vue-components
上一步呢，是需要自己引入这个
组件的，又因为用的是setup，所以不需要注册组件，只需要引入，但是引入也很费劲，vue3中掀起了一个自动导入的浪潮，说的就是这个unplugin-vue-components插件
4.2.1 安装
pnpm i unplugin-vue-components
4.2.2 修改 vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
IconsResolver({
//prefix: "icon", // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
// {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
}),
],
}),
Icons({
autoInstall: true,
}),
],
});
4.2.3 测试
这个图标就是，
没有自己引入，但界面上显示了，但是这里引入图标的方式就变了，你得用i打头，然后-拼上图标名称 ，就是下面这个图的红色框的内容
<template>
<div>
<h3>unplugin-icons 自动引入所需图标</h3>
<Noto1stPlaceMedal />
<i-logos:adobe-after-effects />
</div>
</template>
<script setup lang="ts">
import Noto1stPlaceMedal from "~icons/noto/1st-place-medal";
</script>
<style scoped></style>
4.2.4 引入本地图标
有时候，我们也需要引入自己
本地的图标
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import IconsResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
import Components from "unplugin-vue-components/vite";
import { FileSystemIconLoader } from "unplugin-icons/loaders";
import path from "node:path";
const localIconPath = path.join(process.cwd(), "src/assets/icon");
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
IconsResolver({
//prefix: "icon", // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
// {prefix}-{collection}-{icon} 使用组件解析器时，您必须遵循名称转换才能正确推断图标。
customCollections: ["local-icon"], // 如若 Icons 配置本地图标，这里也需要配置
}),
],
}),
Icons({
autoInstall: true,
customCollections: {
"local-icon": FileSystemIconLoader(localIconPath, (svg) =>
svg.replace(/^<svg\s/, '<svg width="1em" height="1em" class="dida-icon"')
),
},
}),
],
});
扫一扫
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
