在vue3中使用icon圖標(biāo)的三種方案

更新時(shí)間：2023年07月26日 09:17:04 作者：白哥學(xué)前端

這篇文章主要介紹了三種使用icon的方案，分別是element-icon、svg-icon、@iconify/vue，三種方案通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

1. element-icon

Element Plus 提供了一套常用的圖標(biāo)集合。

1.1. 安裝

# 選擇一個(gè)你喜歡的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue# 選擇一個(gè)你喜歡的包管理器

1.2. 注冊(cè)所有圖標(biāo)

從 @element-plus/icons-vue 中導(dǎo)入所有圖標(biāo)并進(jìn)行全局注冊(cè)。

// main.ts
// 如果您正在使用CDN引入，請(qǐng)刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

1.3. 基礎(chǔ)用法

<!-- 使用 el-icon 為 SVG 圖標(biāo)提供屬性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者獨(dú)立使用它，不從父級(jí)獲取屬性 -->
    <Edit />
  </div>
</template>

如果你想用字符串的形式，可以這樣搞。

以側(cè)邊欄的圖標(biāo)渲染為例子。

我的路由是這樣寫(xiě)的：

{
  path: '/index',
  name: 'Index',
  component: () => import('@/views/workbench/home/index.vue'),
  meta: {
  title: '工作臺(tái)',
  icon: 'HomeFilled',
  affix: true,
}

當(dāng)在組件中渲染的時(shí)候可以用component組件來(lái)渲染：

<el-menu-item
  :index="subItem.path"
  @click="handleClickMenu(subItem)"
  >
   <el-icon>
     <component :is="subItem.meta.icon"></component>
  </el-icon>
</el-menu-item>

最終效果：

2. svg-icon

如果element的icon不滿足我們的需求的話，我們可以從iconfont去下載svg圖標(biāo)。然后使用。

2.1. 安裝

首先要使用vite-plugin-svg-icons插件

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2.2. 配置

在vite.config.ts中配置一下

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

這里注意iconDirs的路徑，是讀取的svg icon存放的目錄。

2.3. 封裝

我們把Svg封裝成一個(gè)組件：

<template>
  <i :class="['el-icon', spin && 'svg-icon-spin']" :style="getStyle">
    <svg aria-hidden="true">
      <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
    </svg>
  </i>
</template>
<script setup lang="ts" name="SvgIcon">
  import { computed } from 'vue'
  import type { CSSProperties } from 'vue'
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#ffffff',
    },
    size: {
      type: [Number, String],
      default: 20,
    },
    spin: {
      type: Boolean,
      default: false,
    },
  })
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  const getStyle = computed((): CSSProperties => {
    const { size } = props
    let s = `${size}`
    s = `${s.replace('px', '')}px`
    return {
      fontSize: s,
    }
  })
</script>
<style scoped lang="scss">
  .el-icon {
    --color: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1em;
    color: var(--color);
    fill: currentColor;
    svg {
      width: 1em;
      height: 1em;
    }
  }
  .svg-icon-spin {
    animation: circle 1.5s infinite linear;
  }
  /* 旋轉(zhuǎn)動(dòng)畫(huà) */
  @keyframes circle {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

這里我封裝的支持prefix、name、size、color、spin（是否旋轉(zhuǎn)）等屬性。

2.4. 使用

我們先去iconfont下載一個(gè)svg格式的圖標(biāo)。

下載完成后，把這個(gè)svg放入iconDirs聲明的路徑下面即可：

在項(xiàng)目中使用。引入這個(gè)組件然后使用即可。注意name跟你的svg name保持一致。

<SvgIcon name="welcome" size="400px" /><SvgIcon name="welcome" size="400px" />

我這里的圖標(biāo)效果是這樣的：

3. iconify

iconify是一種非常廣泛的圖標(biāo)解決方案，它收集了全網(wǎng)所有的圖標(biāo)。

3.1. 安裝

pnpm install --save-dev @iconify/vuepnpm install --save-dev @iconify/vue

3.2. 封裝

import { h, defineComponent } from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
export default defineComponent({
  name: 'IconifyIconOnline',
  components: { IconifyIcon },
  props: {
    icon: {
      type: String,
      default: '',
    },
  },
  render() {
    const attrs = this.$attrs
    return h(
      IconifyIcon,
      {
        icon: `${this.icon}`,
        style: attrs?.style
          ? Object.assign(attrs.style, { outline: 'none' })
          : { outline: 'none' },
        ...attrs,
      },
      {
        default: () => [],
      },
    )
  },
})

當(dāng)然你不封裝也可以。

3.3. 使用

首先我們要找一個(gè)圖標(biāo)，可以去icon-sets.iconify.design/。搜索你想要的圖標(biāo)。

復(fù)制圖標(biāo)的名字。

在項(xiàng)目中直接使用

<template>
  <div class="btn">
    <el-tooltip content="刷新">
      <el-button circle>
        <IconifyIcon icon="ri:refresh-line" height="16" />
      </el-button>
    </el-tooltip>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { IconifyIcon } from '@/components/IconifyIcon'
export default defineComponent({
  components: {
    IconifyIcon,
  },
})
</script>
<style scoped lang="scss">
.btn {
  margin-right: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

如果你想直接在vscode中預(yù)覽這個(gè)圖標(biāo)長(zhǎng)啥樣，就像下面這樣：