四、在main.js中引入svg import'@/icons'// icon 五、配置 vue.config.js(主要为打包进行设置) constpath=require('path')// 将传入的相对路径转换成绝对路径functionresolve(dir){returnpath.join(__dirname,dir)}module.exports={chainWebpack(config){// set svg-sprite-loaderconfig.module.rule('svg')....
index.js代码如下,自动导入 src/icons/svg/ 下的 svg 文件。 import Vuefrom'vue'import SvgIconfrom'@/components/SvgIcon'//svg组件//register globallyVue.component('svg-icon', SvgIcon)constreq = require.context('./svg',false, /\.svg$/)constrequireAll = requireContext =>requireContext.keys()....
第一步首先 npminstall svg-sprite-loader--save 在assets文件夹下创建icons文件夹用来存放svg文件夹和index.js文件 index.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 importVue from'vue' importSvgIcon from'@/components/SvgIcon' // 注册全局组件 Vue.component('svg-ico...
1、创建vue项目 vue create my-project 目录结构为: image.png 2、在vue项目中安装 svg-sprite-loader npm install svg-sprite-loader --save-dev 3、在src文件夹下创建组件 components/Svg.vue <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </templ...
确保SVG图标文件的路径正确。 检查Webpack配置是否正确加载了svg-sprite-loader。 查看浏览器的控制台是否有错误信息,这可能会给出加载失败的原因。 按照以上步骤,你应该能够在Vue 3项目中成功使用svg-sprite-loader来管理和显示SVG图标。如果遇到任何问题,可以根据错误信息进一步调试和排查。
5、再vue.config.js中配置svg-sprite-loader chainWebpack:config=>{config.module.rule('svg').exclude.add(resolve('src/assets/svg_icon'))// index.js 的路径.end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/svg_icon'))// index.js 的路径.end().use('sv...
项目中使用SVG有两个场景 1、Iconfont字体图标 2、SVG图标svg-sprite 问题背景: 由于vue cli默认已经对svg做了处理,所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。 //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader
liuhongdi@lhdpc:/data/vue/svgdemo$ npm install svg-sprite-loader --save-dev added 47 packages in 11s 14 packages are looking for funding run `npm fund` for details 1. 2. 3. 4. 5. 6. 二,创建访问svg的类 1,创建svgIcon目录,并在其下创建svg目录: 如图: ...
版本:@vue/cli 4.3.1 使用: npm install -D svg-sprite-loader 在src/components/ 下创建 SvgIcon 组件 配置SvgIcon.vue 网络异常,图片无法展示 | <template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg></template>export default {name: 'SvgIcon',props: {i...
1、先用 vue-cli 创建一个空项目 使用vue create project-name 命令创建一个默认的项目,这个是区别于 cli2.0 的,需要注意下 vue create vue-demo cd vue-demo 2、安装 svg-sprite-loader 依赖 npminstall--save-dev svg-sprite-loader 3、在根目录创建 vue.config.js,并在 vue.config.js 中输入如下配置 ...