Vue3+Vite+Ts项目中优雅使用SVG图标全攻略

2024-01-09 06:47:17







随着前端技术的发展，SVG图标因其轻量、可伸缩和易于维护的特性，逐渐成为现代前端开发中的首选图标格式。在Vue3+Vite+Ts项目中，我们可以通过引入SVG插件并创建自定义图标组件，轻松地使用SVG图标。

## 项目结构

在开始之前，让我们先了解一下Vue3+Vite+Ts项目的结构。

├── src
│ ├── icons
│ │ ├── index.vue
│ │ ├── index.ts
│ │ ├── svgicon.vue
│ │ └── svgicon.ts
│ ├── App.vue
│ ├── main.js
│ └── vite.config.js
├── package.json
└── README.md


## 1. 引入SVG插件

首先，我们需要在项目中引入SVG插件。我们可以使用`vue-svg-loader`插件，该插件可以帮助我们轻松地将SVG文件转换为Vue组件。

npm install -D vue-svg-loader


## 2. 创建文件

接下来，我们需要在`@/src/icons`目录下创建三个文件：

* `index.vue`：这是SVG图标的模板文件。
* `index.ts`：这是SVG图标的JS逻辑文件。
* `svgicon.vue`：这是单个SVG图标的模板文件。
* `svgicon.ts`：这是单个SVG图标的JS逻辑文件。

## 3. 编写SVG图标模板文件

在`index.vue`文件中，我们可以编写SVG图标的模板代码。

```html
<template>
  <svg
    :width="width"
    :height="height"
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
  >
    <slot />
  </svg>
</template>

4. 编写SVG图标JS逻辑文件

在index.ts文件中，我们可以编写SVG图标的JS逻辑代码。

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    width: {
      type: String,
      default: '1em'
    },
    height: {
      type: String,
      default: '1em'
    }
  }
})

5. 编写单个SVG图标模板文件

在svgicon.vue文件中，我们可以编写单个SVG图标的模板代码。

<template>
  <svgicon>
    <path d="M1024 1024H0V0h1024v1024z m-192-448a384 384 0 1 1-768 0 384 384 0 0 1 768 0z" />
  </svgicon>
</template>

6. 编写单个SVG图标JS逻辑文件

在svgicon.ts文件中，我们可以编写单个SVG图标的JS逻辑代码。

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HomeIcon',
  components: { SvgIcon }
})

7. 使用SVG图标

现在，我们就可以在Vue组件中使用SVG图标了。例如，我们在App.vue文件中可以这样使用SVG图标：

<template>
  <div>
    <svgicon>
      <home-icon />
    </svgicon>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import HomeIcon from '@/src/icons/home-icon.vue'

export default defineComponent({
  name: 'App',
  components: { SvgIcon, HomeIcon }
})
</script>