当前位置：

首页 > 编程开发 > vue3+vue-cli4中怎么使用svg

vue3+vue-cli4中怎么使用svg

作者：自在如风听雨时间：2025-04-29 来源：正软商城浏览：2

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup(props){consticonName=com

本文目录

一、安装 svg-sprite-loader

npm install svg-sprite-loader --save-dev

二、在src/components/svgIcon下新建组件index.vue






.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

三、在assets在创建icons文件夹

imgs文件夹里含一个svg文件夹，放svg格式文件，以及一个index.js文件，该文件内容如下

// 获取当前目录所有为.svg的文件
const req = require.context('./svg', false, /\.svg$/)

// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{
    return requireContext.keys().map(requireContext)
}
requireAll(req)

四、在src同级下创建vue.config.js进行配置

经评论区总结，如果是在非vue-cli4的项目中，在config.module.rules.delete("svg");报错的话，可以尝试使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();替换该语句

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); // 重点：删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/imgs')) // 处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
};

五、在main.js里引入，以及做一些小修改

此处注意，将组件注册放到main.js里。不然会报[Vue warn]: Failed to resolve component: svg-icon的问题，预测为父组件先创建完了而子组件还没创建进去，导致该问题的出现

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'

const app = createApp(App)

import SvgIcon from '@/components/svgIcon' 
app.component('svg-icon', SvgIcon)

app.use(store).use(router).mount('#app')

六、在页面中使用

七、文件目录结构及其效果展示

vue3+vue-cli4中怎么使用svg

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

旧版夸克浏览器安卓版下载 v10.3.5.1010安装最新图文教程 2026-11-05 15:13

立刻MV苹果端特效添加与卡点技巧：提升视频质感的方法 2026-10-31 13:24

coreldraw怎么把图片置入图形中 2026-10-30 00:29

3dmax不锈钢材质参数vray怎么操作 2026-10-30 00:27

Premiere如何设置中文 2026-10-29 19:08

编程开发 Vue3

上一篇：高德地图怎么测量距离_高德地图测量距离的方法

下一篇：抖音上传作品有几种方法？如何搬运别人的视频变成自己的原创呢？

相关文章更多

pinia数据持久化的步骤详解与插件配置教程

详解Pinia数据持久化的实现步骤，包括手动订阅状态、封装通用插件及处理序列化例外，帮助开发者构建稳定的前端状态存储方案。

2026-10-29 8 DreamView

Vue3 数据持久化

PS网页版直接使用

PS网页版免费官方入口为https://www.adobe.com/products/photoshop/web.html，支持PSD编辑、实时协作、多色彩空间、智能抠图、AI修复、跨端同步、中文引导及SVG/PSD兼容等核心功能。对于很多设计新手，或者只是偶尔需要处理图片的朋友来说，直接在线、免

2026-08-18 17 暮色微凉

浏览器 Edge 微信 Adobe 淘宝 Safari html

chrome搜索免验证入口

Chrome官方免验证入口为https://www.google.cn/chrome/，提供全平台安装包、免登录即用、本地化安全机制及引擎级性能优化。到底该去哪里找正版、免费且无需繁琐验证的Chrome浏览器入口？这个问题困扰了不少网友。今天，我们就来直通核心，为大家详细拆解Chrome引擎的官方

2026-08-17 20 BrightSoul

Windows Chrome浏览器 CSS Linux Java JavaScript git

HTML转PDF在线官网

HTML转PDF在线官网入口：网页内容一键生成PDF指南 HTML转PDF在线官网入口是https://htmltopdf.com，支持HTML5标签、CSS渲染、多语言字符、Web字体；操作免注册，可预览、自定义参数、批量导出；输出300DPI、保留超链接与矢量图；本地处理保障隐私；兼容主流浏览器

2026-08-17 12 慢热型

Windows 浏览器云服务 Edge CSS Linux 操作系统 html 编码

VSCode快速生成SVG代码预览_在编辑器内实时查看矢量图

VSCode默认不渲染SVG，必须安装SVG Viewer（作者cssho）插件双击预览；它轻量快速、支持自动刷新，但不执行CSS/JS、不加载外部资源，含样式或脚本的SVG需用Live Server在浏览器中预览。一个常见的困扰是：VSCode 编辑器本身并不直接渲染 SVG 图形。如果不安装专

2026-04-30 29 吹吹风会发光

怎么在VSCode中预览SVG矢量图-代码修改与实时渲染对比技巧

怎么在VSCode中预览SVG矢量图-代码修改与实时渲染对比技巧先说一个核心事实：VSCode 本身并不具备渲染 SVG 的能力。你在网上看到的所谓“实时预览”，本质上都是通过插件模拟或者绕道浏览器实现的。所以，当你双击一个 .svg 文件，看到的却是冷冰冰的 XML 源码时，别急着怀疑自己的设置

2026-04-29 0 OpenWorld

SVG图像怎么打开？简单教程分享

SVG图像的打开方式取决于用途。1.浏览：可直接用Chrome、Firefox等浏览器打开，适合快速查看；2.编辑：使用AdobeIllustrator、Inkscape或AffinityDesigner等矢量图编辑软件，适合修改颜色、形状等；3.修改代码：可用Notepad++、VSCode等文本编辑器，适合有技术基础的开发者；4.在线编辑：使用SVG-Edit、BoxySVG等在线工具，无需安装软件但功能有限；5.代码编辑器预览：通过VSCode等支持SVG插件的编辑器预览，便于开发调试。SVG因其可

2025-11-10 72 WeekendLife

如何从零开始搭建vue3项目

说明记录一次Vue3的项目搭建过程。文章基于vue3.2.6和vite2.51版本，使用了ui库Elementplus，vue-router4，Layout布局封装，axios请求封装，别名配置等。开始1.使用vscode开发工具安装vue3的插件Volar，在vue2中我们使用的是Vetur。vue3在线code工具传送门sfc.vuejs.org/2.执行初始化及安装命令：npminitvite初始化vite此过程可以输入项目名、选择vue/react项目及js/ts环境选择，vue3已经完全支持ts

2025-07-05 6 BrightSoul

vue3中getCurrentInstance怎么使用

父组件中：1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出getCurrentInstance方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法实现调用子组件count+1import{getCurrentInstance,ComponetInternalInstance,ref}from"vue";importChildfrom"./zi.vue";constchild=r

2025-06-02 2 小宇宙叶知秋

怎么使用vue3搭建后台系统

首先使用npm或者yarn创建一个vue项目//使用npm创建一个基于vite构建的vue项目npmcreatevite@latest//使用yarn创建一个基于vite构建的vue项目yarncreatevite@latest在创建的构成中选择vuevue-ts创建完之后将项目拖到编译器打开一、配置vite在vite.config.ts文件中配置项目的服务数据，配置如下：//此处配置项目服务参数server:{host:"0.0.0.0",//项目运行地址，此处代表localhostport:8888,

2025-05-28 3 RainLight

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。