vue项目中使用svg图标/插件svg-sprite-loader

最新推荐文章于 2025-02-13 15:00:33 发布

smouns_

最新推荐文章于 2025-02-13 15:00:33 发布

阅读量684

点赞数 4

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/smouns_/article/details/140259104

版权

项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。
svg有以下优点：

svg放大不失真,png，jpg会出现失真现象
svg的体积非常小，对有大量图标图片的页面体验友好
图像文件可读，易于修改和编辑
svg文件还可嵌入JavaScript脚本来控制svg对象

node版本:v14.19.0 svg-sprite-loader版本:6.0.11

1.安装svg-sprite-loader

 npm install svg-sprite-loader

2、webpack 配置（vue.config.js）

const { defineConfig } = require('@vue/cli-service')
const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = defineConfig({
  publicPath: './',
  outputDir: 'baseData',
  assetsDir: 'assets',
  productionSourceMap: false,
  transpileDependencies: true,
  lintOnSave:false,//为了解决 Component name "index" should always