# vue-svg-sfc-loader

> webpack loader: load svg as vue component

Latest version **1.0.2** (published 2022-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-svg-sfc-loader
pnpm add vue-svg-sfc-loader
yarn add vue-svg-sfc-loader
bun add vue-svg-sfc-loader
```

## 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 | 1.0.2 |
| Published | 2022-07-17 |
| First published | 2022-07-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zyascend |
| Maintainers | zyascend |
| Keywords | webpack, vue, svg, loader, sfc |

## Links

- npm: https://www.npmjs.com/package/vue-svg-sfc-loader
- Repository: https://github.com/zyascend/vue-svg-sfc-loader
- Homepage: https://github.com/zyascend/vue-svg-sfc-loader#readme
- Issues: https://github.com/zyascend/vue-svg-sfc-loader/issues
- npm.io page: https://npm.io/package/vue-svg-sfc-loader

## Dependencies (1)

- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.2.37

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-07-17
- 1.0.1 — 2022-07-17
- 1.0.0 — 2022-07-17

## README

# vue-svg-sfc-loader  

**import SVG as Vue Component with webpack !!!**  

**将SVG文件加载为Vue组件**

## Installation
```
npm i vue-svg-sfc-loader -D
yarn add vue-svg-sfc-loader -D
```

## Configuration    

use `vue-svg-sfc-loader` as the last loader of the SVG laoders  

将 `vue-svg-sfc-loader` 作为处理SVG的最后一个loader

### Webpack

```
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'vue-svg-sfc-loader',
            options: {
              className: 'myclass'
            }
          },
        ],
      },
    ],
  },
};
```
### Vue CLI 
```
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('vue-svg-sfc-loader')
      .loader('vue-svg-sfc-loader')
      .options({
        className: 'myclass'
      })
      .end()
  },
};
```

## options
### `className`  

type: `string`  

default value: `class`

add custom class props to root `<svg>`   

为`<svg>`更元素添加一个class

the render result:
```
<svg class='myclass' ...>
  ...
</svg>
```
## Usage Example
**❗Attention❗: if `<style>` scoped, `:deep()` is needed!** 
```
<template>
  <Icon class="icon" />
</template>

<script setup>
import Icon from '@/assets/svg/icon.svg'
</script>

<style lang="scss" scoped>
:deep(.icon) {
  path {
    stroke: black;
  }
}
</style>
```

more features is on the way!!!

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