在vue3+element-plus 中使用遍历数据库名使用svg 图标

最新推荐文章于 2025-01-25 17:16:37 发布

，45

最新推荐文章于 2025-01-25 17:16:37 发布

阅读量301

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_43414269/article/details/137875802

版权

博客围绕前端开发展开，涉及Vue.js和JavaScript相关内容，Vue.js是前端开发常用框架，JavaScript是前端开发核心语言，二者在前端领域发挥重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

，45

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue3+Ts+Element-plus项目，svg图标组件封装、使用（阿里图标库）。

m0_64378190的博客

03-05

1941

Vue3+Ts+Element-plus项目，svg图标组件封装、使用（阿里图标库）。

svg使用 element plus 使用外部下载的svg，使用或作为背景图片的使用方式，svg背景填充自适应父级宽高

oMangGuoBuDing1的专栏

06-04

432

【代码】elementplus 使用外部下载找的svg，使用或作为背景图片的使用方式。

1 条评论您还未登录，请先登录后发表或查看评论

Element Plus中SvgIcon引入和使用（Vue项目）

lushuai_1986的专栏

07-25

2132

【代码】Element Plus中SvgIcon引入和使用（Vue项目）

vue3+element-plus项目svg图标引入及使用

weixin_60974764的博客

09-05

6220

一种是element-plus自带的el-icon图标，另一种是第三方库的图标，我这里使用的阿里图标。

element-plus 最新SvgIcon图标最新使用指南

阿啵呲嘚的博客

01-20

3317

1：安装 yarn add @element-plus/icons 或者 npm install @element-plus/icons 2：使用基础用法（element-plus官网也有说明），可以全局注册组件或者在单个组件中引用，全局注册可以查看vue3全局注册组件  // 添加is-loading可以看到图标旋转了起来，但是应该只能在le-icon标签中使用，直接使用在图标组件中无效 <el-icon :size="si

vue3.0+ts+element-plus多页签应用模板：头部工具栏（上）

m0_46172278的博客

05-05

3345

目录系列链接一、目录结构二、写一个基本的HeaderToolbar 系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇第三章——vue3.0+ts+element-plus多页签应用模板：element-plus按需引入篇第四章——vue3.0+ts+element-plus多页签应用模板：侧边导航菜单篇（上）第五章——vue3.0+ts+element

vue3.0+ts+element-plus多页签应用模板：多级路由缓存

m0_46172278的博客

05-05

3549

目录系列文章一、先说点啥1. 为啥需要路由缓存？2. 怎么实现路由缓存？二、路由扁平化三、定义tag模块处理路由缓存系列文章一、先说点啥 1. 为啥需要路由缓存？关于这个问题，我就只假设一个场景：用户正在填写一个很长很长的表单，然后他填着填着就需要查看一下其他页面表格中的信息，这个时候他一定会去切换路由。好的，等他看完回来，他发现自己刚才用了一个小时填了一半的表单，居然被清！空！了！当然这只是个笑话，应该没有人会设计一个这样反人类的表单，但是如果这个系统有路由缓存的功能，那么刚才的悲剧是不是就可以避

Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，

最新发布

每天都要努力学习哦~~

01-25

367

官方提供了组件导入的方式使用图标。而我的图标是全局导入的，默认使用官方的命名。在菜单栏使用图标，并且是动态渲染的，刚好用到图标组件名称是Menu时，点击带有这个图标名称的菜单，就出问题了，导致其他菜单不显示。最后使用排出法才确定是个图标组件的名称导致的bug，后面就换了一个图标组件。目前在升级前端框架，UI组件element-plus升级到了目前最新的1.3.0beta8版本，图标也换成了官方提供的Svg。最后，我只直接换了一个其他icon组件，然后我提交了issues，建议他们重新改下命名方式。

vite+vue3使用element-plus图标方案

Cipher_Y的博客

07-18

2127

自从Vue发布了3x版本后，Element UI也发布了对应的组件库版本，图标使用上也发生了改变，特意记录下，希望可以帮到大家!PS:抛弃了字体图标的用法，直接使用了svg的方式。并且需要单独下载如果文章对你有帮助，可以，如果大家有更好意见或方案，欢迎评论区指出。

Vue3+ElementPlus+TS

ianutt的博客

09-06

1568

Vue3

ElasticSVGElements, 使用SVG形状动画添加弹性增强用户界面交互.zip

09-18

ElasticSVGElements, 使用SVG形状动画添加弹性增强用户界面交互弹性SVG元素使用SVG形状动画添加弹性增强用户界面交互。关于Codrops的文章演示工具在个人或者商业项目中免费集成或者建立在它的上。不重新发布，重新发布或者销售"是"。详细阅读：许可协议跟随我们：Twitter，Faceb

vite+vue3 使用svg icon(包括element-plus icon)

weixin_45750721的博客

01-30

495

components/SvgIcon/svgicon.ts文件内容如下。components/SvgIcon/index.vue文件内容如下。且按照iconDirs中路径准备好svg文件。在components文件夹下创建如下文件。

element-ui 中使用svg-icon

u012350560的博客

10-08

6483

1、阿里巴巴图标库图标svg格式下载引入 2、前端工程化svg格式图标处理 const req = require.context("../../../assets/icons/svg", false, /\.svg$/); const requireAll = requireContext => requireContext.keys(); const re = /\.\/(.*)\.svg/; const svgIcons = requireAll(req).map(i => {.

vue-element-admin项目中，icon、svg图标的使用

笑到世界都狼狈的博客

02-06

4496

在vue-element-admin中使用svg图片，下载svg图片，文件夹中查看svg图片

vue3项目+TypeScript前端项目 ———— elemnet-plus,svg图标配置，sass，mock数据

口袋的天空的博客

05-21

1172

elementui-plus,svg图标配置，sass，mock数据

vue3+element-plus前端框架集成自定义svg图标

weixin_51410591的博客

12-23

470

因为项目需要将自定义的svg图标和element的icon样式结合起来，例如，菜单图标功能。3. 在man.js中引入你自己加的svg图标，以组件引入，类似于eIcons的引入方式。4.接下来你可以直接写在页面里，或者创建一个选择图标的组件。需要的插件：vite-plugin-svg-icons。1. 首先要在vite.config.js进行配置。2. 封装一个svgIcons组件。这是需要配置svg文件存放的路径。5. 系统菜单效果展示。

Element-Plus从font-icon迁移至SVG-icon

Ziuc的博客

06-13

757

element-plus

vue3.0+ts+element ui中如何使用svg图片

Fiona_lms的博客

09-14

824

3、封装一个svg组件。记录一下，方便后续查阅。

Vue - 集成 element-plus、svg、mock、sass，配置文件夹别名、环境变量等

AI工程化、开源分享、文档翻译、代码笔记

07-21

514

一、集成element-plus 二、src别名的配置三、环境变量的配置四、SVG图标配置安装/配置 SVG依赖插件 svg封装为全局组件五、集成sass 六、mock数据七、axios二次封装八、API接口统一管理

vue3引入elementplus图标都有哪些

12-30

### 如何在 Vue3 中引入 Element Plus 图标 #### 方法一：全局注册图标组件为了使项目中的所有地方都能使用到 `Element Plus` 的图标，可以在项目的入口文件中进行全局注册。通过遍历 `ELIcons` 对象来实现这一点。 ```javascript import * as ELIcons from '@element-plus/icons-vue'; const app = createApp(App); for (let iconName in ELIcons) { app.component(iconName, ELIcons[iconName]) } ``` 这种方式使得任何页面都可以直接使用这些图标而无需再次单独导入[^2]。 #### 方法二：局部按需加载单个图标如果只需要在一个特定的地方使用某个图标，则可以选择只在这个位置上按需加载该图标。这有助于减少打包体积并提高性能。 ```html <template> <div> <el-icon :size="size" :color="color"> <Edit></Edit>  </el-icon> </div> </template> <script setup lang="ts"> import { Edit } from '@element-plus/icons-vue' </script> ``` 此代码片段展示了如何定义一个名为 `MyIcons` 组件，并在其内部声明性地使用 `<el-icon>` 来包裹具体的图标实例，同时传递尺寸 (`size`) 和颜色 (`color`) 属性给它[^3]。 #### 设置 SVG 图标的样式当使用 `<Delete />` 或者类似的自闭合标签形式展示图标时，可以通过内联样式的属性如 `width`, `height`, `margin-right`, `color` 等来自由调整其外观表现： ```html <Delete style="width: 2em; height:2em; margin-right: 8px;color: lightcoral;" /> ``` 上述例子设置了删除按钮的宽高以及右侧间距还有填充的颜色[^1]。 --- 关于 **支持的图标列表** ，官方文档提供了详细的指南和完整的图标集合。通常情况下，在安装好 `@element-plus/icons-vue` 后就可以访问所有的内置图标资源了。建议查阅最新的 [Element Plus 官方网站](https://element-plus.org/) 获取最权威的信息和支持。