【Nova UI】八、打造组件库第一个组件-图标组件（上）：图标组件开发实战攻略

最新推荐文章于 2025-04-25 18:29:26 发布

拖孩

最新推荐文章于 2025-04-25 18:29:26 发布

阅读量728

点赞数 34

分类专栏： Nova UI 文章标签： ui 前端 javascript vue.js css

本文链接：https://blog.csdn.net/qq_40230003/article/details/147442943

版权

Nova UI 专栏收录该内容

11 篇文章

订阅专栏

序言

在组件库的构建中，那些简洁美观、表意清晰的图标组件🎨，宛如灵动的视觉音符🎶，为用户体验增添了独特魅力。你是否好奇🤔，它们究竟是如何在组件库中精彩呈现的呢？此前，我们已深入掌握 SASS 强大的全局变量管理技巧，而在图标组件开发的新征程🚀中，这些技巧将怎样发挥奇妙作用，又会赋予图标组件哪些独特优势呢？带着这些疑问，让我们一同开启组件库首个组件 —— 图标组件的开发之旅，一探究竟🔍。

SVG

介绍

SVG，全称可缩放矢量图形（Scalable Vector Graphics），是一种基于 XML（可扩展标记语言）的二维图形描述方式。与依赖像素存储的传统位图图像，如 JPEG、PNG 不同，SVG 图形由数学公式精准定义。这就像给图形赋予了 “伸缩自如” 的超能力💪，无论放大或缩小多少倍，图形始终能保持清晰锐利，线条平滑流畅，细节毫发无损，完美诠释了矢量图形的独特魅力🌟。

语法

下面这段简单代码，直观展现了 SVG 的基础语法：

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

其中，<svg>标签划定了图形的展示区域🎭，width和height属性分别设定其宽和高。<circle>标签则用于绘制圆形，cx、cy确定圆心坐标，r指定半径，fill填充颜色。寥寥数行，便能勾勒出一个图形，尽显 SVG 语法的简洁高效✨。

优势

强大的可缩放性：这是 SVG 的核心优势之一，在响应式设计大行其道的当下，作用尤为突出。无论是手机的小屏幕📱，还是电脑的大显示器🖥️，甚至是超高清大屏，SVG 图形都能无缝适配，清晰呈现，为用户带来始终如一的视觉享受👀。
轻巧的文件体积：对于简单图形，SVG 文件通常比同等复杂程度的位图文件体积小。因为 SVG 是用代码描述图形，如同一份图形绘制指南📖，而非存储每个像素的信息。这一特性使其在网络传输和存储方面优势显著，能有效加快加载速度，节省带宽资源，提升用户体验。
出色的交互性：SVG 图形可通过 JavaScript 和 CSS 与用户进行丰富交互。借助 JavaScript，能为其添加动画、旋转等动态效果，让图形在页面上 “动” 起来🎮；利用 CSS 可轻松改变其外观样式，如颜色、线条粗细、透明度等。当用户鼠标点击🖱️、悬停在图形上时，还能触发特定动作或显示提示信息，极大增强了用户与界面的互动性，提升了用户体验。

SVG图标组件包

在packages/svgs/components目录下，我们新增plus.vue文件来构建plus SVG 图标组件。

<template>
  <svg fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"  /><path fill="#2c2c2c" d="M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"  /></svg>
</template>

<script setup>
  defineOptions({
    name: 'NPlusSvg',
  })
</script>

在<template>部分，<svg>标签内的fill="currentColor"属性，使图标颜色能随当前文本颜色动态变化🌈，实现了灵活的颜色适配。viewBox="0 0 1024 1024"属性确定了图标的可视区域，确保在不同显示环境下都能完整呈现。<path>元素则精准勾勒出plus图标的形状。这里要特别注意⚠️，不要随意添加额外的fill属性，否则会导致无法灵活修改图标颜色。在<script setup>部分，通过defineOptions函数定义组件名称为NPlusSvg，方便在组件库中识别和引用。

设立 index.ts 入口文件

为更好管理和组织图标组件，在packages/svgs目录下新增index.ts作为入口文件。

import Plus from './components/plus.vue'
export { Plus } 

export const svgs = ['Plus'] as const

通过import语句引入plus.vue组件，并命名为Plus，再用export语句导出，方便在其他地方引用。同时定义常量svgs，它是包含所有已导出图标的数组。后续新增图标组件时，都需在此文件引入、导出并添加到svgs数组，为组件库的进一步扩展和维护奠定基础。

as const是一种类型断言语法，它主要用于将一个表达式的类型推断为最窄的类型。通常用于常量声明，特别是对于对象、数组和字面量类型。

正常情况下 const svgs = ['Plus'] 的类型会被推断为 string[]。

使用了as const 断言语法它的类型会被推断为 readonly ["Plus"]。并且数组中的元素类型是具体的字面量类型（"Plus"），而不是宽泛的string类型。这意味着你不能将其他字符串添加到这个数组中，并且数组中的元素不能被重新赋值为其他字符串。

至此，SVG 图标组件包已完成大半，为构建完整强大的组件库迈出了坚实一步。后续我们将继续完善，为组件库增添更多实用、美观的图标组件🎁。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：https://github.com/gmingchen/nova-ui
基于 Vue3 + Element-plus 管理后台基础功能框架
预览：https://admin.gumingchen.icu
Github：https://github.com/gmingchen/agile-admin
Gitee：https://gitee.com/shychen/agile-admin
基础版后端：https://github.com/gmingchen/java-spring-boot-admin
文档：http://admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统
预览：https://chatterbox.gumingchen.icu/
Github：https://github.com/gmingchen/chatterbox
Gitee：https://gitee.com/shychen/chatterbox

基于 node 开发的后端服务：https://github.com/gmingchen/node-server