🎨🎨前端开发，图标系列 之 vue3 用 @iconify/vue

在 Vue 3 中使用 @iconify/vue 可以轻松集成 Iconify 图标。以下是具体步骤：

1. 安装依赖

首先，安装 @iconify/vue：

npm install @iconify/vue

2. 引入并使用图标

在 Vue 组件中引入并使用图标：

<template>
  <div>
    <!-- 使用 Icon 组件 -->
    <Icon icon="mdi:home" />
    <Icon icon="fa-solid:user" />
  </div>
</template>

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

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

3. 自定义图标大小和颜色

可以通过 style 或 class 自定义图标样式：

<template>
  <div>
    <Icon icon="mdi:home" style="font-size: 24px; color: red;" />
    <Icon icon="fa-solid:user" class="custom-icon" />
  </div>
</template>

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

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

<style>
.custom-icon {
  font-size: 32px;
  color: blue;
}
</style>

4. 使用离线图标（可选）

如果需要离线使用图标，先安装 @iconify/json 包含所有图标集：

npm install @iconify/json

然后在项目中引入并使用：

import { Icon, addIcon } from '@iconify/vue';
import homeIcon from '@iconify-icons/mdi/home';

addIcon('home', homeIcon);

export default {
  components: {
    Icon,
  },
};

在模板中使用：

<template>
  <div>
    <Icon icon="home" />
  </div>
</template>

5. 动态加载图标

可以动态加载图标：

<template>
  <div>
    <Icon :icon="currentIcon" />
    <button @click="changeIcon">Change Icon</button>
  </div>
</template>

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

export default {
  components: {
    Icon,
  },
  data() {
    return {
      currentIcon: 'mdi:home',
    };
  },
  methods: {
    changeIcon() {
      this.currentIcon = 'fa-solid:user';
    },
  },
};
</script>

总结

通过以上步骤，你可以在 Vue 3 中轻松使用 @iconify/vue 集成 Iconify 图标，并支持自定义样式和动态加载。