在Vue 3项目中加载SVG文件,你可以按照以下步骤进行操作: 1. 安装并配置SVG Loader 首先,你需要在Vue项目中安装一个SVG Loader。这里以vue-svg-loader为例: bash npm install vue-svg-loader --save-dev 然后,在vue.config.js文件中进行配置: javascript // vue.config.js module.exports = { chainWebpack...
方法一:使用Vue CLI的Vue SVG Loader插件 确保你的项目是通过Vue CLI创建的,并且已经安装了Vue SVG Loader插件。 在Vue组件中,使用import语句导入SVG文件,例如:import Logo from '@/assets/logo.svg'。 在模板中,使用<component>标签来渲染SVG图像,例如:<component :is="Logo" />。 方法二:使用Vue的内置功能 ...
.test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId:'icon-[name]' }) .end() } } 新建svg组件 <template> <!--svg组件 @/components/SvgIcon --> <svg class="svg-icon" aria-hidden="true"> <u...
loader, options: { hmr: !env.prod } }, 'css-loader' ] }, { test: /\.svg$/, use: [ 'vue-loader', 'vue-svg-loader' ], } ] }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: '[name].css' }), new webpack.DefinePlugin({ __VUE_OPTIONS_API__: '...
将图标放在特定文件夹下,这里以 @/assets/svg 中导入的 svg 为例 2、安装 svg-sprite-loader npmisvg-sprite-loader 3、配置 vue.config.js module.exports= {// 配置使用stylus全局变量chainWebpack: config => {constsvgRule=config.module.rule("svg"); ...
项目中使用SVG有两个场景 1、Iconfont字体图标 2、SVG图标svg-sprite 问题背景: 由于vue cli默认已经对svg做了处理,所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。 //默认`vue-cli` 对svg做的处理,正则匹配后缀名为.svg的文件,匹配成功之后使用 url-loader
npm i svg-sprite-loader 配置vue.config.js constpath=require('path')functionresolve(dir){returnpath.join(__dirname,dir)}module.exports=defineConfig({transpileDependencies:["@enn/ency-design"],chainWebpack:(config)=>{// 内置的svg处理排除指定目录下的文件config.module.rule('svg').exclude.add(re...
module.rule("svg"); svgRule.uses.clear(); svgRule .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end(); } }; 4、新建 SvgIcon.vue 文件,这里可传入 name 属性控制图标类型,传入 size 属性控制图标大小,传入 color 属性控制图标颜色 代码...
首先先安装svg-sprite-loader npm i svg-sprite-loader -D 二、创建存放svg的文件夹 在项目的src文件下创建icons/svg文件夹,此文件夹专门用来存放icons的小图标,将来会从该文件夹中读取所有的icons图标 三. 修改规则和新增规则 在vue-cli3中默认已经配了对svg处理的规则(见下图) ...
0.SvgIcon全局组件 全局组件是指在应用程序的任何位置使用的组件,使用全局组件前需要在Vus.js实例中注册,并将其挂载到实例中。全局组件是可复用的Vus.js实例。 1.安装依赖svg-sprite-loader npm install svg-sprite-loader -D 安装成功后,在package.json文件中可以看到安装成功的版本号 ...