目录
- 1. element-icon
- 1.1. 安装
- 1.2. 注册所有图标
- 1.3. 基础用法
- 2. svg-icon
- 2.1. 安装
- 2.2. 配置
- 2.3. 封装
- 2.4. 使用
- 3. iconify
- 3.1. 安装
- 3.2. 封装
- 3.3. 使用
- 最后
1. element-icon
Element Plus 提供了一套常用的图标集合。
1.1. 安装
# 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue # pnpm $ pnpm install @element-plus/icons-vue# 选择一个你喜欢的包管理器
1.2. 注册所有图标
从 @element-plus/icons-vue 中导入所有图标并进行全局注册。
// main.ts // 如果您正在使用CDN引入，请删除下面一行。 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }
1.3. 基础用法
<!-- 使用 el-icon 为 SVG 图标提供属性 --> <template> <div> <el-icon :size="size" :color="color"> <Edit /> </el-icon> <!-- 或者独立使用它，不从父级获取属性 --> <Edit /> </div> </template>
如果你想用字符串的形式，可以这样搞。
以侧边栏的图标渲染为例子。
我的路由是这样写的：
{ path: '/index', name: 'Index', component: () => import('@/views/workbench/home/index.vue'), meta: { title: '工作台', icon: 'HomeFilled', affix: true, }
当在组件中渲染的时候可以用component组件来渲染：
<el-menu-item :index="subItem.path" @click="handleClickMenu(subItem)" > <el-icon> <component :is="subItem.meta.icon"></component> </el-icon> </el-menu-item>
最终效果：
2. svg-icon
如果element的icon不满足我们的需求的话，我们可以从iconfont去下载svg图标。然后使用。
2.1. 安装
首先要使用vite-plugin-svg-icons插件
yarn add vite-plugin-svg-icons -D # or npm i vite-plugin-svg-icons -D # or pnpm install vite-plugin-svg-icons -D
2.2. 配置
在vite.config.ts中配置一下
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default () => { return { plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], symbolId: 'icon-[dir]-[name]', }), ], } }
这里注意iconDirs的路径，是读取的svg icon存放的目录。
2.3. 封装
我们把Svg封装成一个组件：
<template> <i :class="['el-icon', spin && 'svg-icon-spin']" :style="getStyle"> <svg aria-hidden="true"> <use :xlink:href="symbolId" rel="external nofollow" :fill="color" /> </svg> </i> </template> <script setup lang="ts" name="SvgIcon"> import { computed } from 'vue' import type { CSSProperties } from 'vue' const props = defineProps({ prefix: { type: String, default: 'icon', }, name: { type: String, required: true, }, color: { type: String, default: '#ffffff', }, size: { type: [Number, String], default: 20, }, spin: { type: Boolean, default: false, }, }) const symbolId = computed(() => `#${props.prefix}-${props.name}`) const getStyle = computed((): CSSProperties => { const { size } = props let s = `${size}` s = `${s.replace('px', '')}px` return { fontSize: s, } }) </script> <style scoped lang="scss"> .el-icon { --color: inherit; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: inherit; line-height: 1em; color: var(--color); fill: currentColor; svg { width: 1em; height: 1em; } } .svg-icon-spin { animation: circle 1.5s infinite linear; } /* 旋转动画 */ @keyframes circle { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } </style>
这里我封装的支持prefix、name、size、color、spin（是否旋转）等属性。
2.4. 使用
我们先去iconfont下载一个svg格式的图标。
下载完成后，把这个svg放入iconDirs声明的路径下面即可：
在项目中使用。引入这个组件然后使用即可。注意name跟你的svg name保持一致。
<SvgIcon name="welcome" size="400px" /><SvgIcon name="welcome" size="400px" />
我这里的图标效果是这样的：
3. iconify
iconify是一种非常广泛的图标解决方案，它收集了全网所有的图标。
3.1. 安装
pnpm install --save-dev @iconify/vuepnpm install --save-dev @iconify/vue
3.2. 封装
import { h, defineComponent } from 'vue' import { Icon as IconifyIcon } from '@iconify/vue' export default defineComponent({ name: 'IconifyIconOnline', components: { IconifyIcon }, props: { icon: { type: String, default: '', }, }, render() { const attrs = this.$attrs return h( IconifyIcon, { icon: `${this.icon}`, style: attrs?.style ? Object.assign(attrs.style, { outline: 'none' }) : { outline: 'none' }, ...attrs, }, { default: () => [], }, ) }, })
当然你不封装也可以。
3.3. 使用
首先我们要找一个图标，可以去icon-sets.iconify.design/。搜索你想要的图标。
复制图标的名字。
在项目中直接使用
<template> <div class="btn"> <el-tooltip content="刷新"> <el-button circle> <IconifyIcon icon="ri:refresh-line" height="16" /> </el-button> </el-tooltip> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' import { IconifyIcon } from '@/components/IconifyIcon' export default defineComponent({ components: { IconifyIcon, }, }) </script> <style scoped lang="scss"> .btn { margin-right: 20px; cursor: pointer; transition: all 0.3s; }
如果你想直接在vscode中预览这个图标长啥样，就像下面这样：
你可以安装一个插件：Iconify IntelliSense
我们在浏览器中打开调试工具，看看application，发现这里缓存的一些图标
当第一次请求后，浏览器会把这个图标缓存。下次请求的时候直接从缓存中读取的。
最后
以上，就是我在项目中使用图表的三种方式。你还有其他的方式吗？欢迎在评论区讨论。
界面展示：
以上就是在vue3中使用icon图标的三种方案的详细内容，更多关于vue3使用icon图标的资料请关注本网站其它相关文章！
您可能感兴趣的文章:
- Vue3项目引入阿里iconfont图标与字体及使用教程
- vue3中element-plus icon图标的正确使用姿势
- Vue3中element-plus全局使用Icon图标的过程详解
- Vue3+Element Plus使用svg加载iconfont的处理方法
- Vue3中使用Element Plus时el-icon无法显示的问题解决
- Vue3使用icon的两种方式实例
