vue3实战项目第一日（学习项目）：封装svg全局组件

技术要点

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全局组件，具体呈现图如下：