# vite-plugin-svg

**Repository Path**: webxrd/vite-plugin-svg

## Basic Information

- **Project Name**: vite-plugin-svg
- **Description**: 在vite中使用svg文件时更方便。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/webxrd/vite-plugin-svg-icon/blob/master/readme.md
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 3
- **Created**: 2022-05-16
- **Last Updated**: 2025-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 插件作用
使在vite中使用svg文件时更方便。支持热更新。

## 安装
```shell
npm i @webxrd/vite-plugin-svg -D
```

## 使用示例：
### 目录结构
```text
src
    assets
        icons
            user.svg
            lock.svg
            repeat.svg
        other
            icons
                check.svg
                circle.svg
                repeat.svg
main.js
vite.config.js
```
### vite.config.js
```javascript
import path from 'node:path';
import {vitePluginSvg} from "@webxrd/vite-plugin-svg";
// 如果需要热更新功能，可以安装：npm i vite-plugin-restart -D
import ViteRestart from 'vite-plugin-restart'
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // ...other plugin
        
        vitePluginSvg({
            // 必要的。必须是绝对路径组成的数组。
            // 重复的文件名，会按照后来优先原则覆盖。比如 other/icons/repeat.svg 会覆盖 icons/repeat.svg。
            iconDirs: [
                path.resolve(__dirname, 'src/assets/icons'),
                path.resolve(__dirname, 'src/assets/other/icons'),
            ],
            symbolIdFormat: 'icon-[name]'
        }),

        // 热更新
        ViteRestart({
            restart: [
                'src/assets/icons/**/*.svg',
                'src/assets/other/icons/**/*.svg',
            ]
        }),
    ]
});

```
### 使用图标

配置完以后就可以轻松使用 src/assets/icons 里的的图标了
```html
<svg>
    <use xlink:href="#icon-user" />
</svg>
<svg>
    <use xlink:href="#icon-lock" />
</svg>
<svg>
    <use xlink:href="#icon-check" />
</svg>
<svg>
    <use xlink:href="#icon-circle" />
</svg>
<svg>
    <use xlink:href="#icon-repeat" />
</svg>
```

## 在vite+vue3中使用
### 封装公用组件：components/SvgIcon.vue
```html
<template>
    <svg class="SvgIcon" aria-hidden="true"><use :xlink:href="symbolId" /></svg>
</template>
<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true,
        }
    },
    setup(props) {
        const symbolId = computed(() => `#icon-${props.name}`);
        return {
            symbolId,
        }
    }
})
</script>
<style scoped>
    .SvgIcon {
        font-size: inherit;
        fill: currentColor;
        width: 1em;
        height: 1em;
        text-indent: 0;
        vertical-align: bottom;
    }
</style>
```
### 在组件中使用。（或者注册在全局，使用起来更方便）
```html
<template>
    <div>
        <SvgIcon name="user"></SvgIcon>
        <SvgIcon name="lock"></SvgIcon>
        <SvgIcon name="check"></SvgIcon>
        <SvgIcon name="circle"></SvgIcon>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import SvgIcon from './components/SvgIcon.vue';
export default defineComponent({
    components: {
        SvgIcon,
    },
})
</script>
<style scoped>
    .SvgIcon  {
        font-size: 30px;
        color: blue;
    }
</style>
```