vue项目中怎样引入图标,应用什么方�

Admin 2022-07-16 群英技术资�

这篇文章将为大家详细讲解有关“vue项目中怎样引入图标,应用什么方法”的知识,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获�

前言

在项目开发中,使用图标的方式有很多种,可以在iconfont上面找到合适的图标,通过http或者直接下载使用,这里我分享一种通过实现自定义组件的方式引入图标�

搭建环境

这里通过@vue/cli 4.5.13新建项目,并且需要安装依赖svg-sprite-loader,用来处理对应的svg图标,方便我们使用�

安装� npm install --save-dev svg-sprite-loader

配置vue.config.js

在安装svg-sprite-loader后,新建vue.config.js来配置依赖:

// vue.config.js
const { resolve } = require('path')

module.exports = {
  chainWebpack(config) {
    config
      .module
      .rule('svg')
      .exclude
      .add(resolve('src/icons'))
      .end()
    config
      .module
      .rule('icons')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

这里通过chainWebpack来做了两项配置:

  • 第一个是让原来的其他处理svg的依赖不处理src/icons下我们的自定义图标文�
  • 通过svg-sprite-loader来处理自定义的图标文件,options里面的设置表示,生成的svg的symbolId为icon和文件名的拼接�

新建图标组件

在components目录下新建一个SvgIcon.vue文件�

<template>
  <i class="icon">
    <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->
    <svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
      <use :xlink:href="iconName" rel="external nofollow" ></use>
    </svg>
  </i>
</template>

<script lang="ts">
import { PropType, toRefs } from 'vue'

export default {
  props: {
    size: {
      type: Number as PropType<number>,
      default: 14
    },
    fillColor: {
      type: String as PropType<string>,
      default: '#000'
    },
    iconName: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props: any) {
    const { size, fillColor, iconName: _iconName } = toRefs(props)
    const iconName = `#${_iconName.value}`

    return {
      size,
      fillColor,
      iconName
    }
  }
}
</script>

然后,新建一个icons目录,并且新建一个index文件,用来挂在组件和引入svg图标�

// index.ts
import SvgIcon from '@/components/SvgIcon.vue'
import { App } from 'vue'

export default (app: App) => {
  app.component('svg-icon', SvgIcon)
}

const ctx = require.context('./svg', false, /\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

requestAll(ctx)
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import installSvgIcon from '@/icons/index'

const app = createApp(App)

installSvgIcon(app)
app.mount('#app')

这个文件做了两件事:

  1. 通过导出一个方法来挂载全局组件svg-icon�
  2. 通过require.context来实现自动化引入svg目录下的图标文件�

使用组件

首先,我们要在icons/svg目录下存放svg图标文件(在iconfont上找自己需要的);

然后,就可以在其他地方使用啦�

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <svg-icon icon-name="icon-dashboard"></svg-icon>
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

直接通过组件svg-icon的方式引入,然后传入icon-name即可,icon-name的值由icon拼接svg文件名组成�

总结

这种自定义方式引入svg图标的方式,还是挺方便的,想要加上一个图标的时候,几步即可�

  1. 直接下载好svg文件放入对应目录中;
  2. 接着通过svg-icon组件来引入�

但是,修改样式时不能通过css来修改,这点就不太方便了�


上述内容具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多"vue项目中怎样引入图标,应用什么方�"的内容,大家可以关注群英网络的其它相关文章�
标签� vue引入图标

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部