当前位置： 首页 > article >正文

vue3【组件封装】S-icon 图标 （ 集成 iconify ）

article 2024/12/25 2:37:18

1. 安装依赖

npm i -D @iconify/json

npm i --save-dev @iconify/vue

2. 组件封装

src/components/S-icon.vue

<script setup lang="ts">
// 搜索图标 https://icon-sets.iconify.design/
import { Icon } from '@iconify/vue'
defineProps({
  icon: {
    type: String,
    required: true
  }
})
</script>

<template>
  <Icon :icon="icon" />
</template>

3. 页面使用

<S-icon icon="icon-park:moon" />

在这里插入图片描述

搜索目标图标

打开官网 https://icon-sets.iconify.design/

输入英文关键字进行搜索

在这里插入图片描述

点击目标图标，复制图标名称即可

在这里插入图片描述


http://www.kler.cn/a/394954.html

相关文章：

  • 牛客网 SQL36查找后排序
  • Pytorch | 从零构建ParNet/Non-Deep Networks对CIFAR10进行分类
  • 鸿蒙Next之包体积极限优化
  • 代码随想录 day52 第十一章 图论part03
  • Unity中有什么情况下是需要用UniTask替代其他异步方式的吗?
  • 重拾设计模式--状态模式
  • 删库跑路，启动！
  • 三:网络为什么要分层：OSI模型与TCP/IP模型
  • 北京大学c++程序设计听课笔记101
  • 握手协议是如何在SSL VPN中发挥作用的？
  • torch.nn.**和torch.nn.functional.**的区别
  • 同局域网ssh连接wsl2
  • 鸿蒙NEXT开发案例：光强仪
  • 【数学二】线性代数-二次型
  • 基于STM32设计的矿山环境监测系统(NBIOT)_262
  • 机器学习——30种常见机器学习算法简要汇总
  • Ue5 umg学习（一）
  • 修改数据库和表的字符集
  • Swift 宏（Macro）入门趣谈（一）
  • 在Oracle数据中更新整个对象和更新对象的某几个字段时，他们的锁是相同的吗
  • bash file_name 和 ./file_name 之间的区别
  • 【深度学习】环境下载地址汇总
  • spring组件介绍
  • STM32WB55RG开发(2)----STM32CubeProgrammer烧录
  • C#与C++交互开发系列（二十二）：跨进程通信之使用基于HTTP协议的REST风格的API
  • 若依前后端分离版部署（超详细）