开发指南

下载svg包 —— 适配所有框架

# 原生，所以不用考虑项目框架
yarn add lz-svgs

注入项目

import installSvgs from 'lz-svgs'
import { noChoose, choose } from 'lz-svgs/svgs' // 项目中用到的图标
installSvgs([noChoose, choose]) // 考虑到按需加载，所以svg图标通过参数传入

使用

<!-- 前提要注册好全局组件 -->
<svg-icon icon-id="choose" color="red" size="24px" />

注册全局组件

<template>
  <svg aria-hidden="true" :width="size" :height="size" :fill="color" :stroke="color">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
export default {
  name: 'svgIcon',
  props: {
    iconId: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: '0.24rem'
    },
    color: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#lz-svg-${this.iconId}`
    }
  }
}
</script>

<style scoped>
.svg-icon { vertical-align: -0.15em;overflow: hidden; }
</style>