svg

# svg

# 概述

svg 组件

# 前置条件

1.安装 svg loader 依赖npm install svg-sprite-loader --save-dev
2.添加 loader 配置

 chainWebpack: (config) => {
    // svg是个基础loader
    const svgRule = config.module.rule("svg");

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear();

    // 添加要替换的 loader
    svgRule
      .test(/\.svg$/)
      .include.add(resolve('src/icons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .tap((options) => {
        // eslint-disable-next-line no-param-reassign
        options = {
          symbolId: 'icon-[name]',
        };
        return options;
      });
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.在使用 svg 的页面中导入 svg 图标

# 基础布局

<!-- svg组件 -->
<RzSvg iconClass="titile" iconStyle="width:100px;height:100px;" />
<script>
  // import "@/icons/svg/titile.svg";
  export default {
    data() {
      return {};
    },
    methods: {},
  };
</script>

Copy

# 属性

参数	说明	类型	可选值	默认值
iconClass	svg 图标名称	string	—	-
iconStyle	svg 图标样式	string	—	-

更新时间: 12/31/2021, 6:02:21 PM

← video