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:

| Property | Description | | -------- | --------------------------------------------------- | | size | Set different width and height of SVG then default. | | stroke | Set different stroke width then default. | | color | Set different stroke color then default. |

<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

| Name | Type | Default | Description | | ------ | ------ | -------------------- | -------------------------------------------------------------------------------------------------- | | path | string | './src/assets/icons' | Path to folder with all svg icons used by loader. For this path will be created alias @svgicons. | | size | number | 24 | Default value for component property size. | | stroke | number | 2 | Default value for component property stroke. | | color | string | 'curentColor' | Default value for component property color. |

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

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