vue <icon>标签

在 Vue.js 中使用 `<icon>` 标签通常是通过自定义组件来实现的。你可以在 Vue 组件中定义一个名为 `Icon` 的组件，然后在模板中使用 `<Icon>` 标签来引用它。

以下是一个简单的例子：

<template>
  <div>
    <Icon name="heart" />
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  components: {
    Icon: {
      props: {
        name: String,
      },
      template: '<i class="icon icon-{{ name }}"></i>',
    },
  },
}
</script>

<style>
.icon {
  /* 定义 icon 的样式 */
}
</style>

在上面的例子中，我们定义了一个 `Icon` 组件，它接受一个名为 `name` 的属性。在组件的模板中，我们使用 `name` 属性来动态生成 `i` 元素的 class 名称，从而实现不同的图标展示。

当我们在 `MyComponent` 组件中使用 `<Icon>` 标签时，我们需要传递一个 `name` 属性，以告诉 `Icon` 组件要展示哪个图标。在上面的例子中，我们传递了一个 `heart` 的值，表示展示一个心形图标。