vue cli3+/electron-vue项目中基于svg-sprite-loader依赖实现字体图标

最新推荐文章于 2023-03-06 14:15:57 发布

Ace.三阶斗尊

最新推荐文章于 2023-03-06 14:15:57 发布

阅读量843

点赞数

分类专栏： Vue 文章标签： vue.js svg

本文链接：https://blog.csdn.net/qq_42231156/article/details/107958564

版权

本文介绍了如何在基于Vue CLI3+和Electron Vue的项目中，利用svg-sprite-loader处理SVG图标。首先，需要安装svg-sprite-loader依赖。接着，配置vue.config.js和webpack.render.config.js以支持SVG图标。SVG图标存储在src/icons/svg文件夹下，通过index.js统一管理。在main.js全局引入，并封装new-svg-icon.vue组件以便在各个组件中复用。

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

1. 在开发环境安装svg-sprite-loader依赖：

npm i svg-sprite-loader -D    //-D开发依赖

2. 基于vue cli3+，在vue.config.js中配置：

// vue ui 可视化界面管理配置/eslint/依赖。
const path = require('path')
function resolve (dir) { // 传值相对路径dir，返回绝对路径
  return path.join(__dirname, dir)
}
module.exports = { // 导出配置模块
  chainWebpack (config) { // 链式webpack配置
    config.module.rule('svg') // svg规则配置，排除src/icons文件夹
      .exclude.add(resolve('src/icons'))
      .end() // 回到上一级
    config.module.rule('icons') // 新增icons规则，设置svg-sprite-loader
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ // 使用图标的名称
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

基于electron-vue搭建的项目中配置svg-