vue中使用svg的方法

第一种方法

在src下创建一个icons文件夹，再创建一个svg和一个index.js
svg文件夹中放入所有的svg

创建一个组件SvgIcon代码如下

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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>

在icons中的index.js中全局注册组件

<!--首先引入组件-->
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

<!--注册组件-->

Vue.component('svg-icon',SvgIcon)

在代码中使用

1 2	<!--name就是所要使用的svg名称--> <svg-icon icon-class="name"></svg-icon>

进一步使用，由于是用js生成的svg代码，不够直观缺点

不能按需加载
自定义性差
添加不友善

因此我们通过使用svg-sprite-loader来实现多个svg的打包

大专栏

vue中使用svg的方法

首先安装svg-sprite-loader
1

npm install svg-sprite-loader --save

在vue的build > webpack.base.conf.js中添加svg的模块

{
    test: /.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],
    options: {
      symbolId: 'icon-[name]'
    }
},
{
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')], // 这个方法是不包含不打包
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
},

自动导入在index.js中添加如下代码

1
2
3

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req)

最后使用

1
2
3

<!--icon-class是所使用的svg名-->
<!--class-name是图标的类名控制-->
<svg-icon icon-class='language' class-name="card-panel-icon" />

10 .重点是要引入

1	import '@/icons'

学习地址

第二种方法

与svg同级创建一个svg文件夹，放入需要的svg
使用vue-svgicon
通过文档实现svg的使用

简单用法

npm install vue-svgicon --save-dev 
<!--配置-->
"svg": "vsvg -s ./static/svg/src -t ./src/icons"

<!--main.js中-->
import * as svgicon from 'vue-svgicon'
Vue.use(svgicon, {
  tagName: 'svgicon'
})

<!--home.vue中使用-->
<svgicon name="vue"></svgicon>

<!--执行-->
npm run svg

vue中使用svg的方法

第一种方法

第二种方法

猜你喜欢