svg图在vue项目中使用

程序媛_MISS_zhang_0110

已于 2024-01-05 10:05:06 修改

阅读量403

点赞数 1

分类专栏： Vue 文章标签： svg

于 2021-09-26 13:52:56 首次发布

本文链接：https://blog.csdn.net/MISS_zhang_0110/article/details/120487441

版权

Vue 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

svg图使用

一、安装
二、配置
- 1.webpack中webpack.base.cong.js配置
- 2. vue-cli中vue.config.js配置
三、main.js
四、svgIcon文件
- svg.js
五、使用

一、安装

npm i -D svg-sprite-loader

二、配置

1.webpack中webpack.base.cong.js配置

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/svgIcons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/svgIcons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

2. vue-cli中vue.config.js配置

 // file-loader排除svg图标目录，避免file-loader处理svg图标引发webpack报错
        config.module
              .rule('svg')
              .exclude.add(resolve('assets/icons/svg'))  //assets文件夹下icons文件夹下svg文件夹里面放的svg图
              .end()

        // 生成 svg 雪碧图
        config.module
              .rule('svgSpriteLoader')
              .test(/\.svg$/)
              .include.add(resolve('assets/icons/svg'))
              .end()
              .use('svg-sprite-loader')
              .loader('svg-sprite-loader')
              .options({
                  symbolId: 'icon-[name]'
              })
              .end()

三、main.js

import './svgIcons/svg.js'

四、svgIcon文件

svg.js

import Vue from 'vue'
import SvgIcon from '@/components/svg/svgIcon.vue'

// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

五、使用

<svg-icon iconClass="svg图名"></svg-icon>