其他分享
首页 > 其他分享> > vue中使用svg的方法

vue中使用svg的方法

作者：互联网

第一种方法

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

  3. 创建一个组件SvgIcon代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <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>

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

    1
    2
    3
    4
    5
    6
    7
    <!--首先引入组件-->
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg组件

    <!--注册组件-->

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

  5. 在代码中使用

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

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

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

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

      大专栏  vue中使用svg的方法

    • 首先安装svg-sprite-loader 

      1
      npm install svg-sprite-loader --save

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      {
          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]')
          }
      },

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

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

  9. 最后使用

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

10 .重点是要引入

1
import '@/icons'

学习地址

第二种方法

  1. 与svg同级创建一个svg文件夹，放入需要的svg
  2. 使用vue-svgicon
  3. 通过文档实现svg的使用
  4. 简单用法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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,icons,svg,loader,方法,svgicon,icon
来源： https://www.cnblogs.com/liuzhongrong/p/11874490.html