iconify/vue

作者：整整ー世♂陰霾そ发布日期:2025-07-27 浏览:9

<template>
  <div>
    <!-- 使用 Iconify 图标 -->
    <icon name="mdi:home" />
  </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
  components: {
    Icon
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

解释说明：

模板部分 (<template>)：我们使用了 <icon> 组件，并通过 name 属性指定了图标的名称。这里使用的是 mdi:home，表示 Material Design Icons 中的 "home" 图标。
脚本部分 (<script>)：我们从 @iconify/vue 包中导入了 Icon 组件，并将其注册为本地组件。
样式部分 (<style scoped>)：你可以在这里添加自定义样式，scoped 表示这些样式仅应用于当前组件。

如果你需要更多的图标库或配置选项，可以参考 Iconify 官方文档。

上一篇：vue router push 传参

下一篇：vue splice()函数