vue项目svg打包成雪碧图优化

最新推荐文章于 2024-06-01 18:42:13 发布

coder_vito

最新推荐文章于 2024-06-01 18:42:13 发布

阅读量821

点赞数

本文链接：https://blog.csdn.net/weixin_45746826/article/details/109441185

版权

本文介绍了如何在Vue项目中将SVG图标优化为雪碧图。首先，通过`vue.config.js`配置引入`svg-sprite-loader`依赖。接着，创建`icon`目录，包含`index.js`、`SvgIcon.vue`组件和在`main.js`中引入的`icons`。最后，详细阐述了SVG图标的使用方法。

摘要由CSDN通过智能技术生成

vue.config.js配置

安装依赖

npm i svg-sprite-loader -D

配置

	chainWebpack(config) {
    // 修改当前项目默认svg的配置, 排除icons目录
    config.module.rule('svg')
      .exclude.add(resolve('./src/icons'))
    // 新增一个规则，可以添加icons里面svg文件
    config.module.rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('./src/icons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: "icon-[name]" })
  }

可以输入代码查看配置的效果
vue inspect --rule svg

新建icon目录

目录结构如下图
在这里插入图片描述

index.js

import Vue from 'vue'
import SvgIcon from '../components/SvgIcon.vue'
// webpack创建一个以svg目

最低0.47元/天解锁文章

coder_vito

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue项目svg打包成雪碧图优化

vue.config.js配置安装依赖npm i svg-sprite-loader -D配置 chainWebpack(config) { // 修改当前项目默认svg的配置, 排除icons目录 config.module.rule('svg') .exclude.add(resolve('./src/icons')) // 新增一个规则，可以添加icons里面svg文件 config.module.rule('icons') .test(
复制链接

扫一扫