vue-svg-sfc-loader

import SVG as Vue Component with webpack !!!

将SVG文件加载为Vue组件

Installation

npm i vue-svg-sfc-loader -D
yarn add vue-svg-sfc-loader -D

Configuration

use vue-svg-sfc-loader as the last loader of the SVG laoders

将 vue-svg-sfc-loader 作为处理SVG的最后一个loader

Webpack

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'vue-svg-sfc-loader',
            options: {
              className: 'myclass'
            }
          },
        ],
      },
    ],
  },
};

Vue CLI

module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-sfc-loader')
      .loader('vue-svg-sfc-loader')
      .options({
        className: 'myclass'
      })
      .end()
  },
};

options

className

type: string

default value: class

add custom class props to root <svg>

为<svg>更元素添加一个class

the render result:

<svg class='myclass' ...>
  ...
</svg>

Usage Example

❗Attention❗: if <style> scoped, :deep() is needed!

<template>
  <Icon class="icon" />
</template>

<script setup>
import Icon from '@/assets/svg/icon.svg'
</script>

<style lang="scss" scoped>
:deep(.icon) {
  path {
    stroke: black;
  }
}
</style>

more features is on the way!!!