# vite2-vue3-svg-plugin

> vite2创建的vue3项目中使用svg的插件

Latest version **1.0.4** (published 2021-04-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install vite2-vue3-svg-plugin
pnpm add vite2-vue3-svg-plugin
yarn add vite2-vue3-svg-plugin
bun add vite2-vue3-svg-plugin
```

## 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.4 |
| Published | 2021-04-10 |
| First published | 2021-04-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 (+15 in 1 direct dependencies) |
| Install scripts | no |
| Author | ifngsiyu |
| Maintainers | ifngsiyu |
| Keywords | vite, svg |

## Links

- npm: https://www.npmjs.com/package/vite2-vue3-svg-plugin
- npm.io page: https://npm.io/package/vite2-vue3-svg-plugin

## Dependencies (2)

- [vite](https://npm.io/package/vite.md) ^2.1.5
- [@types/node](https://npm.io/package/@types/node.md) ^14.14.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.4 (latest) — 2021-04-10
- 1.0.2 — 2021-04-10
- 1.0.0 — 2021-04-10

## README

<!--
 * @Author: your name
 * @Date: 2021-04-10 16:17:18
 * @LastEditTime: 2021-04-10 17:36:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vite2-vue3f:\Projects\Plugins\vite2-vue3-svg-plugin\README.md
-->

### 特性:

- vite2 + vue3 + typescript

### Currently supported Vite version:

<P><code>2.1.5</code></p>

### Install

```bash
npm install @types/node vite --save

yarn add @types/node vite --save
```

### Setup

```js
//vite.config.js
import { svgBuilder } from 'vite2-vue3-svg-plugin';

export default defineConfig({
  plugins: [
    vue(),
    svgBuilder("./src/assets/icons/svg/"), //自行根据svg文件路径配置
  ],
});
```

### Usage

SvgIcon.vue

```vue
<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: "",
  },
});

const iconName = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  console.log(props.name, "props.name");
  if (props.name) {
    return `svg-icon ${props.name}`;
    // return `svg-icon icon-${props.name}`
  }
  return "svg-icon";
});
</script>

<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>
```

UseIcon.vue
```vue
<template>
  <div>
    <svg-icon name="close" color="#00ff00"></svg-icon>
  </div>
</template>

<script>
import svgIcon from './components/SvgIcon.vue'

export default {
components: {
   svg-icon:svgIcon
},
};
</script>
```

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