vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶续篇 - 前端

在 Vue3 + Vite2 环境中封装 SVG 图标组件的步骤如下：

创建组件目录和文件：
- 在src/components/目录下创建svgicon目录。
- 在svgicon目录中创建index.vue组件文件。
定义组件属性：
- 在index.vue组件中，定义两个输入属性：图标名称和样式类。
编写组件样式：
- 在<style>标签中定义svgicon的样式类，为组件添加必要的CSS样式。
处理在线 SVG 图标：
- 在<template>部分，使用div元素结合CSS的mask属性来展示在线SVG图标。
- 在<script>部分，通过判断icon属性是否为在线图标的URL，来决定是使用mask属性展示还是直接显示SVG内容。
添加在线图标示例代码：
- 在about.vue或其他页面中引入svgicon组件，并添加在线图标的使用代码。
- 添加自定义样式，测试在线图标的显示效果。
处理本地 SVG 图标：
- 使用vitepluginsvgicons插件来加载本地SVG资源。
- 安装vitepluginsvgicons为开发依赖。
- 在vite.config.ts中配置插件，指定SVG文件的目录和symbolId的生成规则。
- 在main.ts中添加相关语句，确保插件被正确加载和使用。
补充本地 SVG 代码：
- 在svgicon组件的<template>部分，补充展示本地SVG图标的代码。
测试组件功能：
- 确保在线图标、本地图标以及自定义样式类都能正常显示。
- 进行全面的测试，确保封装的svgicon组件功能完整且稳定。

通过以上步骤，您可以在 Vue3 + Vite2 环境中成功封装一个支持本地和在线 SVG 图标的组件svgicon。

vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶续篇