vue项目中svg-icon图标使用

最新推荐文章于 2025-03-31 18:06:33 发布
最新推荐文章于 2025-03-31 18:06:33 发布
阅读量3.1k 收藏 8
点赞数 1
文章标签： vue svg js vue-cli3 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MAMAIMAI/article/details/116738075
版权
该博客详细介绍了在Vue项目中如何使用SVG图标。首先，通过vue-cli3创建项目，由于没有预设的webpack配置，需要在根目录添加vue.config.js。接着，将SvgIcon组件添加到src/components目录，并配置相关文件如validate.js、index.js和svgo.yml。通过提供的链接下载SVG库，并在main.js中引入，最终实现SVG图标的成功显示。

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

需要在代码里添加图标标签，例如

<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" 
v-model="loginForm.password" autocomplete="on" placeholder="请输入密码" >
    <svg-icon slot="prefix" icon-class="password" />
</el-input>

在用户名或者密码前图标不显示，如下图

通过vue create xxxxx创建项目时，这时候没有build文件夹或webpack.base.conf.js，无法配置相关规则，这是需要在项目根目录下添加vue.config.js,并添加以下代码

在src/components目录下加入SvgIcon组件

最低0.47元/天 解锁文章
在vue2中使用 SVG 图标
xiaohuichonga的博客
02-24 324
在vue2中使用svg图标
Vue中如何使用svg-icon
m0_65777910的博客
03-22 478
Vue中如何使用svg-icon
Vue中使用svg-基于vue-svgicon组件
05-17 2525
目录 一、下载vue-svgicon 二、main.js中引入 三、将.svg转换成.js进行引入 四、使用 一、下载vue-svgicon cnpm i -S vue-svgicon 二、main.js中引入 import SvgIcon from 'vue-svgicon' Vue.use(SvgIcon, { tagName: 'svg-icon' }); 注意：这里要记得加上{tagName:'svg-icon'}，否则会报错 三、将.svg转换成.js进行引..
Vue3中的Icon处理方案（包括将svg转化为Icon）
最新发布
yinmomoyin的博客
03-31 450
在前端项目开发中，SVG（可缩放矢量图形）凭借其无损缩放、体积小、可编辑性强等诸多优势，成为了处理图标（Icon）的热门选择。本文将为大家详细介绍几种在项目中处理 SVG 图作为 Icon 的有效方法。
vue-svgicon基本使用
sinat_34849163的博客
07-10 395
安装插件 # 电脑首次使用，需安装全局环境 npm i vue-svgicon -g # 安装vue-svgicon，便于使用iconfont(阿里巴巴矢量图标库) npm i vue-svgicon -s -g,全局安装 -s<=>–save ,局部安装，保存至package.js配置文件中的dependencies字段；开发环境和生产环境都会被打包应用到，多是一些项目中运用到的框架。 -d<=>–save-dev,局部安装，保存至package.js配置文件中的devDepe
手摸手，优雅实现vue中使用 svg-icon
YouZi_X的博客
07-19 601
注册全局svg组件，并使用require.context API 引入所有指定目录下的图标，根据增删自动生成`svgsymbol`
如何在VUE项目中使用svg图标
热门推荐
m0_57524265的博客
07-01 1万+
本文手把手带你一起体验SVG图标的使用，解决大家使用图标的苦恼！
vue-svg-icon：vue2.0中多色svg图标的解决方案（vue2.0的可变彩色svg图标方案）
02-04
vue2图标方案中多色svg图标的解决 v1.2.9 演示： : 特征： 不再需要在main.js中注入SVG 支持SVG的路径，圆，椭圆，矩形，线，折线，多边形标签 支持SVG中的分组标签 在Illustrator或素描中进行实时svg编辑 通过...
vue-svg-icon-set:有效地公开Vue中设置的SVG图标
05-03
将以下更改添加到Webpack配置中，以便vue-svg-icon-set可以转换vue-svg-icon-set并可以输出IconLayer。 module.exports = { ..., entry: { + &#39;lib/icon-layer&#39;: &#39;vue-svg-icon-set/icon-layer.
vue-svg-icon-demo:Vue SVG图标演示
03-11
Vue SVG图标演示 这是CSS-Tricks文章的演示仓库，文章关于构建。 以下图标用于此演示： badge-check从 来自cog-solid excalamation从 来自fire 从send 安装依赖项 npm install 构建并运行开发服务器 npm run ...
vue3.0项目中添加svg图标
摸着石头过河
01-25 1888
在./src/components路径下添加通用组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: "SvgIcon", props: { iconClass: { .
vue svg图标的使用
sinat_38872809的博客
11-09 1283
1. 需要用到图标的地方加入图标标签 <el-input type="text" auto-complete="off" placeholder="账号"> <svg-icon slot="prefix" icon-class="user"/> </el-input> 2. 加入SvgIcon组件 src/components目录下加入SvgIc...
配置svg-icon
qq_41072190的博客
03-10 1168
用法 <el-input type="text" auto-complete="off" placeholder="账号"> <svg-icon slot="prefix" icon-class="user"/> </el-input> 配置 1.开发依赖安装svg-sprite-loader 2.components中引入SvgIcon 3.增加src/icons/index.js 4.修改 vue.config.js（没有就增加这..
vue2项目中使用svg图标
c_qianxia5040的博客
07-29 1926
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源,这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多，放在项目中几乎不占用资源。
Vue中使用SVG图标的步骤【钢镚核恒】
钢镚核恒
07-18 405
Vue中使用SVG图标的步骤 简介 svg 可缩放矢量图形（Scalable Vector Graphics） svg 优势：任意缩放，超强显示效果，较小文件，可压缩 svgo 用来压缩svg中无用信息 svg-sprite-loader 将加载的 svg 图片拼接成 雪碧图，在其他地方通过 引用 在了解这些概念后，就上路吧！ 这里概念排很少，大家可以到其他地方扩充知识~ 上路 添加依赖 "svg-sprite-loader": "4.1.3", "svgo": "1.2.0" 方法一：复制到 pa
Vue自定义svg字体图标
风口浪尖的猪吖
01-27 646
1.安装svg-sprite-loader npm install svg-sprite-loader --save-dev cnpm install svg-sprite-loader --save-dev 2.在src目录下新建icon文件 （1.）新建index.js文件用来注册全局组件 import Vue from "vue"; import SvgIcon from "@/components/SvgIcon"; // register globally Vue.component
vue项目中使用svg图标
weixin_49946035的博客
08-17 903
npm安装：npm install svg-sprite-loader --save-dev。创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。在vue中首先需要安装可以加载svg的依赖。
Vue：将自制的icon打包成文件，使用的时候直接用class即可；以及直接使用icon文件
qq_37899622的博客
11-15 1694
一、将icon存放在一个文件夹中，再写一个css文件 .components-icon-background { background-size: contain; background-position: 50%; background-repeat: no-repeat; } .components-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat;
组件 vue2-svg-icon的使用
05-05
vue2-svg-icon 是一个 Vue.js 的 SVG 图标组件，可以用于快速加载和使用 SVG 图标。以下是使用步骤： 1. 安装 vue2-svg-icon 可以使用 npm 或 yarn 进行安装： ```bash npm install vue2-svg-icon --save ``` 或者 ```bash yarn add vue2-svg-icon ``` 2. 引入组件 在你的 Vue.js 组件中引入 vue2-svg-icon： ```js import SvgIcon from &#39;vue2-svg-icon&#39; Vue.component(&#39;svg-icon&#39;, SvgIcon) ``` 3. 使用组件 在模板中使用 `svg-icon` 标签，并指定 `icon` 属性为对应的图标名称： ```html <svg-icon icon="arrow-up"></svg-icon> ``` 其中 `arrow-up` 是图标的名称，具体的图标名称需要查看你所使用的 SVG 图标库。 4. 配置 SVG 图标库 vue2-svg-icon 默认使用的是 [icomoon](https://icomoon.io/) 的 SVG 图标库，你可以在 `SvgIcon` 组件中通过 `set` 方法来配置使用其他的 SVG 图标库。 例如，如果你想使用 [fontawesome](https://fontawesome.com/) 的 SVG 图标库，可以这样配置： ```js import SvgIcon from &#39;vue2-svg-icon&#39; import { library } from &#39;@fortawesome/fontawesome-svg-core&#39; import { faCoffee } from &#39;@fortawesome/free-solid-svg-icons&#39; import { FontAwesomeIcon } from &#39;@fortawesome/vue-fontawesome&#39; library.add(faCoffee) Vue.component(&#39;font-awesome-icon&#39;, FontAwesomeIcon) SvgIcon.set({ name: &#39;fontawesome&#39;, classPrefix: &#39;fa-&#39;, classSuffix: &#39;&#39;, defaultWidth: &#39;1em&#39;, defaultHeight: &#39;1em&#39; }) ``` 这里我们使用了 `@fortawesome/fontawesome-svg-core` 和 `@fortawesome/free-solid-svg-icons` 来引入 fontawesome 的 SVG 图标库，并且配置了 `SvgIcon` 组件使用 `fontawesome` 图标库，并指定了图标的 class 前缀为 `fa-`，这样我们就可以在模板中使用 `fa-coffee` 这个图标了： ```html <svg-icon icon="fa-coffee"></svg-icon> ``` 更多关于 vue2-svg-icon 的使用方法，可以参考它的官方文档：https://github.com/cenkai88/vue-svg-icon#readme
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值