vue-cli-plugin-svgicons v0.0.5

Vue CLI Plugin Svgicons

Vue CLI plugin to handle loading SVG files in specific folder as components. This plugin can also create from all of them global components.

Getting started

Install the plugin into your project:

vue add svgicons

Usage

There are 2 different approaches how to use this plugin. For smaller project you can load all icons at once as global components, or for large project, using vue router and its "webpackChunkName", it is recommended to load icons according usage in components.

Both approach creates components for icons with optional properties:

<icon-file-name :size=48 />

A) Load icons all at once

You can install a Vue.js plugin to register global components from all svg files in defined path. Components name are defined as prefix plus file name, "[prefix][file-name]".

Default prefix is icon-, but you can override it in plugin options, eg:

import svgicons from "vue-cli-plugin-svgicons";

createApp(App).use(svgicons, { prefix: "ico-" }).mount("#app");

B) Load icons one by one

Other method is to load icons as components only if needed. CLI plugin defined webpack alias @svgicons for a folder with all icons, eg:

import IconCheck from "@svgicons/check";

export default {
  components: {
    IconCheck,
  },
};

Webpack loader default options

Loader default options can be overridden in file vue.config.js, eg:

module.exports = {
  pluginOptions: {
    svgicons: {
      stroke: 4,
    },
  },
};