@iconify/vue

作者：▄对对碰发布日期:2025-12-16 浏览:66

<template>
  <div>
    <!-- 使用 Icon 组件，并通过 name 属性指定图标名称 -->
    <Icon icon="mdi:home" />
  </div>
</template>

<script setup>
// 引入 Icon 组件和图标集合
import { Icon } from '@iconify/vue';
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>

解释说明：

模板部分 (<template>):
- 使用 <Icon> 组件来显示图标。
- icon 属性用于指定图标的名称，格式为 collectionName:iconName。例如，mdi:home 表示使用 Material Design Icons 图标集中的 "home" 图标。
脚本部分 (<script setup>):
- 从 @iconify/vue 中导入 Icon 组件。
- 使用 <script setup> 语法糖可以简化组件的设置，直接在其中导入和使用组件。
样式部分 (<style scoped>):
- 可以为图标添加自定义样式，使用 scoped 属性确保样式仅应用于当前组件。

如果你需要更多图标集合或进一步配置，请参考 Iconify 官方文档。

上一篇：vue mock

下一篇：vue clipboard