vue使用本地svg

作者: Memory_2e2e | 来源:发表于2020-04-01 00:00 被阅读0次

在上一章完成登录页面基本结构之后，svg虽然也写进去了，可怎么都不显示，这章就是解决这个问题。

在vue项目中使用svg，按照EL-ADMIN 后台管理系统模仿写，可是到了页面怎么都不显示图标，网上查了很多资料，最终搞定了，唉！

1.vue项目中src目录下创建icons文件夹，再创建子文件夹svg，将svg图标资源都放到这里

svg1.png

2.再创建入口文件index.js,代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // SvgIcon组件

// register globally
Vue.component('svg-icon', SvgIcon)

// require.context,通过正则匹配到文件，全部引入
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

3.SvgIcon组件
在components文件夹下添加SvgIcon文件夹，文件夹中添加入口index.vue来定义组件，代码如下：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名(没懂，呵呵)

4.vue项目入口main.js文件中引入icons

import './icons' // icon 引入icons文件夹下所有的svg

5.修改webpack配置
修改webpack.base.conf.js配置文件(之前一直调不通，就去看手摸手，带你优雅的使用 icon,一直没注意到这里，我就一直查呀查。。。)

svg2.png

下面就需要导入svg-sprite-loader在package.json配置添加

 "devDependencies": {
    "svg-sprite-loader": "3.8.0",
 }

在手动 npm i重新导入

6.项目中使用方式如下，icon-class后面跟svg的名称

<el-form-item prop="username">
   <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
        <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
   </el-input>
   </el-form-item>
   <el-form-item prop="password">
   <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
   </el-input>
</el-form-item>

7.预览效果图