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

本文介绍了如何在基于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-

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值