# vue-cli-plugin-svgicons

> Vue CLI plugin to handle loading SVG files in specific folder as components and to optionally create from them global components.

Latest version **0.0.5** (published 2022-06-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-cli-plugin-svgicons
pnpm add vue-cli-plugin-svgicons
yarn add vue-cli-plugin-svgicons
bun add vue-cli-plugin-svgicons
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-06-03 |
| First published | 2021-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Miroslav Peterka |
| Maintainers | wiki |

## Links

- npm: https://www.npmjs.com/package/vue-cli-plugin-svgicons
- npm.io page: https://npm.io/package/vue-cli-plugin-svgicons

## Dependencies (2)

- [svgo](https://npm.io/package/svgo.md) ^2.8.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.4.0

## Recent versions

- 0.0.5 (latest) — 2022-06-03
- 0.0.4 — 2022-06-03
- 0.0.3 — 2021-11-06
- 0.0.2 — 2021-06-01
- 0.0.1 — 2021-05-05

## README

# Vue CLI Plugin Svgicons

[![npm](https://img.shields.io/npm/v/vue-cli-plugin-svgicons.svg)
![npm](https://img.shields.io/npm/dm/vue-cli-plugin-svgicons.svg)](https://www.npmjs.com/package/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:

```bash
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.            |

```xml
<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:

```js
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:

```js
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:

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

---
_Source: https://npm.io/package/vue-cli-plugin-svgicons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._