# svg-to-vue-component
> Compile SVG files to Vue SFC.
Latest version **0.3.8** (published 2019-04-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install svg-to-vue-component
pnpm add svg-to-vue-component
yarn add svg-to-vue-component
bun add svg-to-vue-component
```
## 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.3.8 |
| Published | 2019-04-16 |
| First published | 2018-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 234 |
| Author | egoist |
| Maintainers | egoist |
## Links
- npm: https://www.npmjs.com/package/svg-to-vue-component
- Repository: https://github.com/egoist/svg-to-vue-component
- Homepage: https://github.com/egoist/svg-to-vue-component#readme
- Issues: https://github.com/egoist/svg-to-vue-component/issues
- npm.io page: https://npm.io/package/svg-to-vue-component
## Dependencies (6)
- [svgo](https://npm.io/package/svgo.md) ^1.1.1
- [joycon](https://npm.io/package/joycon.md) ^2.1.2
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.12.0
- [posthtml](https://npm.io/package/posthtml.md) ^0.11.3
- [merge-deep](https://npm.io/package/merge-deep.md) ^3.0.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
## Recent versions
- 0.3.8 (latest) — 2019-04-16
- 0.3.7 — 2019-04-03
- 0.3.6 — 2019-03-13
- 0.3.5 — 2019-02-28
- 0.3.4 — 2019-01-24
- 0.3.3 — 2019-01-24
- 0.3.2 — 2019-01-17
- 0.3.1 — 2019-01-11
- 0.3.0 — 2019-01-11
- 0.2.6 — 2018-12-06
- 0.2.5 — 2018-12-05
- 0.2.4 — 2018-12-05
- 0.2.3 — 2018-12-05
- 0.2.2 — 2018-11-10
- 0.2.1 — 2018-11-09
- … 2 more at https://npm.io/package/svg-to-vue-component/versions
## README
# svg-to-vue-component
[](https://npmjs.com/package/svg-to-vue-component) [](https://npmjs.com/package/svg-to-vue-component) [](https://circleci.com/gh/egoist/svg-to-vue-component/tree/master) [](https://patreon.com/egoist) [](https://chat.egoist.moe)
## Why
When you import the `.svg` file as a Vue component instead of using the URL to the file, you can style it with CSS and add addtional DOM properties or event handlers to the component directly.
The differences between this project and [vue-svg-loader](https://github.com/visualfanatic/vue-svg-loader) are:
- This one has built-in hot reloading support for webpack since the SVG code is compiled via `vue-loader`.
- The latter only supports `class` and `style` attributes on the generated component while we support all DOM props and events.
- This one supports project-wise and file-relative configuration for [SVGO](https://github.com/svg/svgo).
## Install
```bash
yarn add svg-to-vue-component --dev
```
## Usage
### With Webpack
```js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
// If you want to import svg in css files
// You need to configure another rule to use file-loader for that
issuer: /\.(vue|js|ts|svg)$/,
use: [
// This loader compiles .svg file to .vue file
// So we use `vue-loader` after it
'vue-loader',
'svg-to-vue-component/loader'
]
}
]
}
// ...other configurations
}
```
Then you can import `.svg` files directly and use them as Vue components:
```vue
```
### With Vue CLI
In your `vue.config.js`:
```js
module.exports = {
chainWebpack(config) {
// Only convert .svg files that are imported by these files as Vue component
const FILE_RE = /\.(vue|js|ts|svg)$/
// Use vue-cli's default rule for svg in non .vue .js .ts files
config.module.rule('svg').issuer(file => !FILE_RE.test(file))
// Use our loader to handle svg imported by other files
config.module
.rule('svg-component')
.test(/\.svg$/)
.issuer(file => FILE_RE.test(file))
.use('vue')
.loader('vue-loader')
.end()
.use('svg-to-vue-component')
.loader('svg-to-vue-component/loader')
}
}
```
## With Poi
In your `poi.config.js`:
```js
module.exports = {
plugins: ['svg-to-vue-component/poi'],
// Or with options for the webpack loader
plugins: [
{
resolve: 'svg-to-vue-component/nuxt',
options: {}
}
]
}
```
### Nuxt.js 2
In your `nuxt.config.js`:
```js
module.exports = {
modules: ['svg-to-vue-component/nuxt'],
// Or with options for the webpack loader
modules: [
['svg-to-vue-component/nuxt',
{
// ...
}
]
]
}
```
## Loader Options
Pass loader options like this:
```js
// ...
{
test: /\.svg$/,
use: [
'vue-loader',
{
loader: 'svg-to-vue-component/loader',
options: {
// ...Your options here
}
}
]
}
```
| Option | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `svgoConfig` | Project-wise configuration for [SVGO](https://github.com/svg/svgo), if you want file-relative configuration, use the config file instead, supported format: `.svgo.{yml,js,json}`, see [here](https://github.com/svg/svgo/blob/master/.svgo.yml) for an example file. If you want to turn off SVGO entirely, pass `false` here. |
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Author
**svg-to-vue-component** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/svg-to-vue-component/contributors)).
> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)
---
_Source: https://npm.io/package/svg-to-vue-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._