@abi-software/svg-sprite 中文文档教程

Question

svg-sprite

用于将 svg 图标捆绑到 Vue 构建中的 npm 包。 这与在运行时从服务器加载 svg 相反，这可能导致 svg 最后加载到站点上。

Using svg-sprite

svg-sprite 目前仅适用于包含在 assets/icons 目录中的 svgs

它但是可以分叉以包含任何一组 svg，或者将来我们可以修改 svg-sprite 以获取指向 svg 文件夹的道具输入

Installation

npm install @abi-software/svg-sprite

Setup

要使用 svg-sprite，我们需要在加载任何 svg 之前加载它在组件中。 保证执行此操作的方法是将其加载到 app.py 的第一行

In App.vue

<template>
    <div ref="root">
      <SvgSpriteColor/>
      ... Rest of app ...
    </div>
</template>

<script>
import {SvgSpriteColor} from '@abi-software/svg-sprite';
export default {
  name: "App",
  components: {
    SvgSpriteColor,
  },
  ...
}

When using an svg (this example is in a component)

<template>
  <svg-icon icon="close" @click.native="close"/>
</template>


<script>
/* eslint-disable no-alert, no-console */
import Vue from "vue";
import {SvgIcon} from '@abi-software/svg-sprite';
Vue.component('svg-icon', SvgIcon);

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Create bundle for npm and publish

npm run build-bundle
npm publish 

Lints and fixes files

npm run lint