在vue3中使用icon图标的三种方案

 更新时间:2023年07月26日 09:17:04   作者:白哥学前端  
这篇文章主要介绍了三种使用icon的方案,分别是element-icon、svg-icon、@iconify/vue,三种方案通过代码示例介绍的非常详细,需要的朋友可以参考下

1. element-icon

Element Plus 提供了一套常用的图标集合。

1.1. 安装

# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue# 选择一个你喜欢的包管理器

1.2. 注册所有图标

从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts
// 如果您正在使用CDN引入,请删除下面一行。
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. 基础用法

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它,不从父级获取属性 -->
    <Edit />
  </div>
</template>

如果你想用字符串的形式,可以这样搞。

以侧边栏的图标渲染为例子。

我的路由是这样写的:

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

当在组件中渲染的时候可以用component组件来渲染:

<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图标。然后使用。

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封装成一个组件:

<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;
  }
  /* 旋转动画 */
  @keyframes circle {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

这里我封装的支持prefix、name、size、color、spin(是否旋转)等属性。

2.4. 使用

我们先去iconfont下载一个svg格式的图标。

下载完成后,把这个svg放入iconDirs声明的路径下面即可:

在项目中使用。引入这个组件然后使用即可。注意name跟你的svg name保持一致。

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

我这里的图标效果是这样的:

3. iconify

iconify是一种非常广泛的图标解决方案,它收集了全网所有的图标。

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: () => [],
      },
    )
  },
})

当然你不封装也可以。

3.3. 使用

首先我们要找一个图标,可以去icon-sets.iconify.design/。搜索你想要的图标。

复制图标的名字。

在项目中直接使用

<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中预览这个图标长啥样,就像下面这样:

你可以安装一个插件:Iconify IntelliSense

我们在浏览器中打开调试工具,看看application,发现这里缓存的一些图标

当第一次请求后,浏览器会把这个图标缓存。下次请求的时候直接从缓存中读取的。

最后

以上,就是我在项目中使用图表的三种方式。你还有其他的方式吗?欢迎在评论区讨论。

界面展示:

以上就是在vue3中使用icon图标的三种方案的详细内容,更多关于vue3使用icon图标的资料请关注脚本之家其它相关文章!

相关文章

  • vue项目如何实现前端预览word与pdf格式文件

    vue项目如何实现前端预览word与pdf格式文件

    最近项目中需要在线预览WORD文档,所以给大家总结下,这篇文章主要给大家介绍了关于vue项目如何实现前端预览word与pdf格式文件的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue 获取视频时长的实例代码

    vue 获取视频时长的实例代码

    这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue页面切换过渡transition效果

    vue页面切换过渡transition效果

    这篇文章主要介绍了vue页面切换过渡transition效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • 详解Vue 全局引入bass.scss 处理方案

    详解Vue 全局引入bass.scss 处理方案

    本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 十分钟带你读懂Vue中的过滤器

    十分钟带你读懂Vue中的过滤器

    过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的,因为它所实现的功能也能用计算属性或者函数调用的方式来实现。这篇文章主要为大家介绍了Vue中过滤器的使用,需要的可以了解一下
    2023-03-03
  • Vue项目中使用vuex详解

    Vue项目中使用vuex详解

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下
    2023-03-03
  • Vue源码cached解析

    Vue源码cached解析

    最近在写闭包的应用的时候,出现了一个cached函数,来源于Vue源码,利用了闭包变量不会被回收的特点,可以缓存变量,cached本质上是一个高阶函数,它接受一个函数的参数,同时返回一个函数
    2022-08-08
  • 7个适用于Vue 3的高颜值UI组件库

    7个适用于Vue 3的高颜值UI组件库

    这篇文章主要给大家分享介绍了7个适用于Vue 3的高颜值UI组件库,合理利用,又或者学习借鉴都是不错的选择,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue infinite update loop的问题解决

    Vue infinite update loop的问题解决

    这篇文章主要介绍了Vue "...infinite update loop..."的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue预览图片和视频的几种实现方式

    Vue预览图片和视频的几种实现方式

    本文主要介绍了Vue预览图片和视频的几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论