Vue3中icon图标使用秘籍：告别烦恼，一招制胜

2023-02-02 11:57:31

Vue3 Icon图标使用全攻略

作为前端开发人员，我们经常需要在项目中使用图标，这可以提升界面美观性并改善用户体验。在Vue3中，有几种不同的方法可以实现图标使用，本文将介绍三种最常用的方案，帮助你告别烦恼，一招制胜。

1. element-icon

element-icon是Element UI提供的一个图标库，它包含大量常用图标，并提供了丰富的样式和配色选项。

要使用element-icon，首先需要安装Element UI，然后在组件中引入ElIcon组件，如下所示：

// 导入element-icon
import { ElIcon } from 'element-plus';

// 使用element-icon
<template>
  <el-icon>
    <i class="el-icon-search"></i>
  </el-icon>
</template>

<script>
  export default {
    components: {
      ElIcon
    }
  }
</script>

2. svg-icon

svg-icon使用SVG格式的图标，具有体积小、可缩放、可编辑等优点。

要使用svg-icon，首先需要安装@vuepress/plugin-svg插件，然后在组件中使用createSvgIcon函数创建图标组件，如下所示：

// 导入svg-icon
import { createSvgIcon } from '@vuepress/plugin-svg'

// 使用svg-icon
<template>
  <svg-icon icon="search"></svg-icon>
</template>

<script>
  export default {
    components: {
      svgIcon: createSvgIcon(
        'search',
        '<svg viewBox="0 0 1024 1024"><path d="M909.6 854.5L649.9 594.8C690.2 542.6 712 479 712 412c0-80.2-31.3-155.4-93.9-216.9L909.6 169.5c12.8 21.6 18.8 47.2 18.8 76.5c0 48.4-12.8 94.5-38.5 137.9zM215.4 854.5L155.5 594.8C206 542.6 228.8 479 228.8 412c0-80.2-31.3-155.4-93.9-216.9L215.4 169.5c12.8 21.6 18.8 47.2 18.8 76.5c0 48.4-12.8 94.5-38.5 137.9z"/></svg>'
      )
    }
  }
</script>

3. @iconify/vue

@iconify/vue是一个支持多种图标库的icon图标组件库，它可以让你轻松地使用来自不同图标库的图标。

要使用@iconify/vue，首先需要安装@iconify/vue包，然后在组件中引入Icon组件，如下所示：

// 导入@iconify/vue
import Icon from '@iconify/vue';

// 使用@iconify/vue
<template>
  <icon icon="mdi:magnify"></icon>
</template>

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