SVG ICONS are more flexible than font ICONS, so more and more projects now tend to use SVG ICONS. Earlier we released VuE-SvgIcon, an icon generation tool for Vue 2.x and a component that displays inline SVG ICONS. At present, vuE-Svgicon has an average weekly download of 2.5W + on NPM, which is not bad, but it has the following disadvantages:

  • You need to build SVG files into JS/TS modules and register them globally before using them
  • Without loading on demand, all ICONS are packaged into the main file, even if ICONS are no longer in use, resulting in a large main package
  • Only supports the vue

To address these shortcomings, vue-Svgicon was refactored. And rename the project name from VUE-Svgicon to Svgicon to indicate that vUE is not supported only. The idea behind the refactoring is to split the functionality into multiple NPM packages for more flexibility, and the positioning of the project becomes an SVG icon toolset.

features

  • Vue 2.x, Vue 3.x, React >= 16.8 by default. You can use @yzfe/svgicon to write components supporting other frameworks
  • Load on demand, load SVG files through webPack Loader (@yzfe/svgicon-loader) into icon data or icon components, you can customize the generated code.
  • Multi-function, support multi-color, including gradient; Support setting fill and stroke at the same time; Support for raw colors, and can only modify the value of a color; Support zoom, animation and other functions;
  • Icon Preview, in any folder, use @yzfe/svgicon-viewer to view the SVG icon effect

NPM package

  • @yzfe/svgicon Generate the data needed by the SVG icon component based on the parameters (props) passed in
  • @yzfe/vue-svgicon SVG icon component for Vue 2.x
  • @yzfe/vue3-svgicon SVG icon component for vue3. X
  • @yzfe/react-svgicon SVG icon component for React
  • @yzfe/svgicon-gen Generate icon data (icon name and processed SVG content) from SVG file contents
  • @yzfe/svgicon-loader You can customize the generated code by loading an SVG file as icon Data (VUE) or an SVG icon component (React)
  • @yzfe/svgicon-viewer Preview SVG ICONS
  • @yzfe/vue-cli-plugin-svgicon Vue-cli plug-in, you can quickly configure SVgicon
  • @yzfe/svgicon-polyfill SVG innerHTML Compatibility (IE)

Quick Start (VUE)

The installation

Using vuE-CLI plug-in (recommended)

You will be prompted to fill in the SVG file path, the globally registered component tag name, and the vUE version
vue add @yzfe/svgicon
Copy the code

If @yzfe/vue-cli-plugin-svgicon is already installed, but the plugin is not called, you can call it manually.

vue invoke @yzfe/svgicon
Copy the code

use

<template>
    <div>
        <icon :data="arrowData" />
    </div>
</template>
<script>
import arrowData from 'svgfilepath/arrow.svg'
export default {
    data() {
        return: {
            arrowData
        }
    }
}
</script>
Copy the code

If transformAssetUrls is configured, you can use the SVG file path directly. You are advised to also configure an alias for the SVG file path.

<template>
    <div>
        <! SVG file path alias @icon -->
        <icon data="@icon/arrow.svg" />
    </div>
</template>
Copy the code

The document

For more details, see the documentation: mmF-fe.github. IO /svgicon/

Small program

Behind will support micro channel applets, alipay applets. If you can’t wait, you can use @yzfe/ Svgicon to wrap the icon component of the applet yourself. The idea behind the SVG icon is to use SVG as a background image, inline style. If you have a better implementation scheme, welcome to discuss.