MarsMgn

外观

Icon图标 ​

Icon图标 ​

SVG 图标介绍 ​

SVG 图标是使用 SVG（可缩放矢量图形）格式创建的图标。SVG 是一种基于 XML 的标记语言，用于描述二维矢量图形，它与分辨率无关，因此可以在任何尺寸下保持清晰的图像质量。

SVG 图标基本结构

  • 一个简单的信封图标。viewBox 属性定义了图标的坐标系统，path 元素描述了图标的形状。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>

Iconify图标介绍 ​

Iconify 是一个开源的图标框架，它将来自多个图标库的图标整合到一起，形成了一个统一的图标资源平台。通过 Iconify，开发者可以轻松访问和使用超过 100 个图标库中的 150,000 多个图标，无需为每个图标库单独集成和管理。

  • 多库合一：整合了 Font Awesome、Material Design Icons、Bootstrap Icons 等主流图标库，提供统一的使用方式。
  • 按需加载：只加载应用中实际使用的图标，无需引入整个图标库，减少资源浪费。

Icon图标组件 ​

文件：src\components\Icon\index.ts

  • 基本支持所有图标库（支持按需加载，只打包所用到的图标），支持使用本地 svg 和 Iconify 图标。

  • 在 Iconify 上，你可以查询到你想要的所有图标并使用，不管是不是 element-plus 的图标库。

基本用法

  • 如果以 svg-icon: 开头，则会在本地中找到该 svg 图标，否则，会加载 Iconify 图标。
  • 在项目的 src\assets\svgs 目录下，自定义了 Icon 图标，默认注册到全局中，可以在项目中任意地方使用。图标下载地址
vue
<template>
  <!-- 加载本地 svg -->
  <Icon icon="svg-icon:peoples" />
  
  <!-- 加载 Iconify -->
  <Icon icon="ep:aim" />
</template>

useIcon ​

useIcon 是一个用于处理图标加载和渲染的自定义 Composition API 函数。它通常用于在组件中动态加载和使用图标，比如在 Element Plus 的 ElButton 组件中传入 icon 属性。

  • useIcon 接收一个对象作为参数，其中 icon 属性是图标的名称。
  • 如果图标的名称以 svg-icon: 开头，则会加载本地的 SVG 图标；否则会加载 Iconify 图标。
vue
<script setup lang="ts">
import { useIcon } from '@/hooks/web/useIcon'
import { ElButton } from 'element-plus'

const icon = useIcon({ icon: 'svg-icon:save' })
</script>

<template>
  <ElButton :icon="icon"> button </ElButton>
</template>

参考资料 ​