# vue-cli-plugin-any-svgicon

> vue-cli plugin to generate sprite sheet from svg icons

Latest version **3.0.0** (published 2022-01-23) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-01-23 |
| First published | 2021-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 434.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | risha700 |
| Maintainers | risha700 |
| Keywords | vue, svgicon, vue-cli, sprite, svg, heroicons-vue, vue sprite svg |

## Links

- npm: https://www.npmjs.com/package/vue-cli-plugin-any-svgicon
- Repository: https://github.com/risha700/vue-cli-plugin-any-svgicon
- Homepage: https://github.com/risha700/vue-cli-plugin-any-svgicon#readme
- Issues: https://github.com/risha700/vue-cli-plugin-any-svgicon/issues
- npm.io page: https://npm.io/package/vue-cli-plugin-any-svgicon

## Dependencies (3)

- [ejs](https://npm.io/package/ejs.md) ^3.1.6
- [express](https://npm.io/package/express.md) ^4.17.1
- [body-parser](https://npm.io/package/body-parser.md) ^1.19.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2022-01-23
- 2.2.2 — 2021-07-23
- 2.2.1 — 2021-07-23
- 2.1.1 — 2021-07-20
- 2.1.0 — 2021-07-20
- 2.0.0 — 2021-07-18
- 1.3.1 — 2021-06-24
- 1.3.0 — 2021-06-24
- 1.2.4 — 2021-06-21
- 1.2.3 — 2021-06-11
- 1.2.2 — 2021-06-11
- 1.2.1 — 2021-06-11
- 1.1.1 — 2021-06-10
- 1.1.0 — 2021-06-10
- 1.0.1 — 2021-06-08
- … 1 more at https://npm.io/package/vue-cli-plugin-any-svgicon/versions

## README

## Any-Svgicon vue cli plugin
***
### 
Is not an icon library, it is a tool to generate sprite svg from icons you will choose, although it generates heroicons collection as a starter while maintaining a backup folder to preview and import from any icons you will list.
## Advantages :
 - easy install "No need to setup webpack configuration".
 - ready to use vue component.
 - preview for all icons locally from your command line.
 - import, rename, delete icons from the UI.

 ## Installation
 ```
vue add any-svgicon
 ```
 this will install, invoke the plugin and leave you with svg-icon.config.js and .env file in your root directory for any special webpack setup, additionally adds the SvgIcon component to components directory.


 ## Next:
-  You will be propmt to choose a folder name (relative to src/assets) to place your chosen svg icons that will be  available for you to include in your vue project

- Add some icon files you pick to the icons folder
### note: 
all svg icons in the icons folder will be bundled and injected in main.js webpack context.

### Tip:
 clean icons width and height is optional but recommended "you control it with css later and svgo plugin strips out most of the attributes", use the following script inside icons folder
```
for f in `ls`;do sed -E -i '' 's/(\^width|height)=.[[:alnum:]]+[\"]/ /g' $f;done
```
## preview your chosen icons

```
npm run icons
```
Will open up a friendly interface on port 3000 to search and choose from.

![icon_preview](readme-assets/icon_preview.png)
## usage:
```
<SvgIcon icon-name='whatevername'/>

available props:
className:string
outline:boolean
// normally will use solid version of the icon and clean its attributes with svgo and  
//then  reapply styles with css

```
### Credits
* svg-sprite-loader
* svgo

## Licensce:
MIT

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