打造交互美学：Vue 3 + Vite下SVG图标的集成与应用

朱雀 2024-02-18 11:14 60阅读 0赞

在现代的 Web 应用程序中，SVG 图标的使用已经变得非常普遍。Vue 3 作为一种强大的前端框架，结合 Vite 这个快速的构建工具，为开发者提供了极佳的开发体验。本文将介绍如何在 Vue 3 + Vite 项目中高效地集成和使用 SVG 图标，为应用程序增添更多的交互性和美观性。

## 步骤1：安装依赖 ##

确保你的项目已经使用 Vite 创建，并且已经集成了 Vue 3。然后，安装 vite-plugin-svg-icons，这是一个用于加载和处理 SVG 的Vite插件。

yarn add vite-plugin-svg-icons -D
    或
    npm i vite-plugin-svg-icons -D

## 步骤2：配置 Vite ##

在 Vite 的配置文件（vite.config.js）中添加对 SVG Loader 的配置，以便 Vue 能够识别并正确加载 SVG 文件。

import { defineConfig } from 'vite'
    import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    import path from 'path'
    
    export default defineConfig({
        plugins:[
            vue(),
            createSvgIconsPlugin({
              // 指定需要缓存的图标文件夹(路径为存放所有svg图标的文件夹不单个svg图标)
              iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
              // 指定symbolId格式
              symbolId: 'icon-[dir]-[name]'
            })
        ]
    })

## 步骤3：创建 SVG 组件 ##

在 Vue 3 项目中创建一个专门用于加载 SVG 图标的组件，比如 SvgIcon文件下的index.vue，这样可以使图标的使用更为灵活和可维护。

<template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" :fill="color" />
      </svg>
    </template>
    
    <script setup>
    const props = defineProps({
      iconClass: {
        type: String,
        required: true,
      },
      className: {
        type: String,
        default: "",
      },
      color: {
        type: String,
        default: "",
      },
    });
    
    const iconName = computed(() => `#icon-${props.iconClass}`);
    
    const svgClass = computed(() => {
      if (props.className) {
        return "svg-icon " + props.className;
      } else {
        return "svg-icon";
      }
    });
    </script>
    
    
    <style scoped>
    .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    
    .svg-external-icon {
      background-color: currentColor;
      mask-size: cover !important;
      display: inline-block;
    }
    </style>

## 步骤4：挂载组件 ##

在 main.js 中引入组件和脚本，并将组件挂载到应用程序中。

import { createApp } from 'vue'
    import App from './App.vue'
     
    // 引入注册脚本
    import 'virtual:svg-icons-register'
    // 引入组件
    import SvgIcon from '@/components/SvgIcon/index.vue'
     
    const app = createApp(App)
     
    // 全局组件挂载
    app.component('svg-icon', SvgIcon)
     
    app.mount('#app')

## 步骤5：使用 SVG 图标 ##

在需要使用 SVG 图标的地方引入 SvgIcon文件下的index组件，并传入相应的图标名称。

// icon-class是svg图标名称，class-name是样式类名
    <svg-icon class-name="search-icon" icon-class="search" />

## 总结 ##

以上便是在 Vue 3 + Vite 项目中集成 SVG 图标的基本步骤。通过使用 Vue 3 的组件化和 Vite 的快速构建能力，你可以轻松地管理和使用 SVG 图标，为应用程序增添更多的交互性和美观性。

记得根据项目实际情况调整配置和组件代码，以适应你的需求。希望这些步骤能够帮助你成功地集成 SVG 图标到你的 Vue 3 + Vite 项目中。