技术要点
1. SVG 图标容器：
- 使用
<svg>标签作为图标容器。 - 通过
:style动态绑定宽度和高度。 - 使用
class="svg-icon"应用基础样式。
2.use标签的使用
<use>标签用于引用 SVG 图标。:xlink:href属性指定图标引用路径。:fill属性控制图标颜色。- 具体代码展示图：
3. Props 设计：
prefix:图标前缀，默认'#icon-'。name:图标名称（必填）。color:图标颜色（可选）。width/height:图标尺寸（默认 16px）。- 具体代码展示图：
- 其中
name就是svg图标的文件名 defineProps是 Vue 3 组合式 API 中的一个编译器宏，用于定义组件的 props。它是在<script setup>中使用的，不需要显式导入。- 进行到这一步，组件的封装就差不多结束了。
组件的导出、声明、注册
在同一个文件夹内创建一个index.ts文件
具体文件夹如下：
index.ts主要内容：
- 1.引入全局对象
//引入项目中全部的全局组件
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
// import Category from './Category/index.vue'
//引入element-plus提供全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
- 2.定义一个全局对象
allGloablComponent并且将其暴露出去。
- 3.不要忘了在
main.js中引入自定义插件对象：注册整个项目全局组件。（漏掉这一步骤可能会在浏览器显示不出组件）
- 4.完成封装一个
svg全局组件，具体呈现图如下：
