Vue项目实战（09）- svg图标的使用-阿里云开发者社区

Vue项目实战（09）- svg图标的使用

2023-11-16 239

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue项目实战（09）- svg图标的使用

1. 引言

在前面的章节，已经讲解了部分vue-element-admin的知识：

本文主要讲解vue-element-admin是如何使用svg图标的。

2. 项目使用svg图标

2.1 下载svg图标

① svg图标可以去https://www.iconfont.cn查找合适的icon，选择svg下载。

② 下载完成后，在vue-element-admin项目，可以看到图标放到了src/icons/svg目录

2.2 注册svg组件

③ 在上图，可以看到在src/icons目录下有一个index.js文件，其功能就是把组件注册到全局，具体代码如下（使用webpack的require.context自动引入src/icons下面所有的图标）：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

④ 可以看到上面的代码引入了SvgIcon组件（目录src/components/SvgIcon ）,具体的代码如下：

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

⑤ 在main.js中引入icon（目录src/main.js）：

2.3 使用svg组件

举个例子，在登录页面（目录： src/views/login/index.vue)，可以看到使用了svg图标，使用方式如下（这里使用了使用 src/icons/svg/user.svg 文件）：

3. 总结

到这里，vue-element-admin使用svg图标的流程讲解完毕，本文完！

Vue项目实战（09）- svg图标的使用

1. 引言