zoukankan      html  css  js  c++  java
  • 如何在vue中使用svg

    1. 第一步要安装依赖

    npm install svg-sprite-loader --save-dev

    2. 在配置文件中需要设置config.js, vue3.0中

    const path = require('path')
    const defaultSettings = require('./src/settings.js')

    function resolve(dir) {
      return path.join(__dirname, dir)
    }
     
    chainWebpack(config) {
     
        // set svg-sprite-loader
        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]'
          })
          .end()
    }

    3. 需要在components文件夹下新建一个SvgIcon/index.vue

    代码如下:
    <template>
      <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :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'
          }
        },
        styleExternalIcon() {
          return {
            mask: `url(${this.iconClass}) no-repeat 50% 50%`,
            '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
          }
        }
      }
    }
    </script>

    <style scoped>
    .svg-icon {
       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>

    4. 新建icons文件夹,在里面新建一个svg文件夹用来存放.svg文件,新建一个index.js文件

    把上一步创建好的SvgIcon文件引用过来

    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)

    5. main.js中要引入

     引入  import '@/icons'

    6. 就可以在文件中引入使用了

    
    
    使用标签 <svg-icon icon-class="你的svg名称" />  就可以使用啦
     
  • 相关阅读:
    css 讲浮动,haslayout,BFC的文章
    css 给inline和inline-block元素设置margin和padding
    css inline元素和inline-block元素之间缝隙产生原因和解决办法
    js 匿名函数立即执行问题
    css 解决图片下小空隙问题
    css BFC布局及用处
    css 单行/多行文字垂直居中问题
    js柯里化
    js 回调函数理解与应用
    js 四种调用模式和this的关系总结
  • 原文地址:https://www.cnblogs.com/vickyzhang/p/13299760.html
Copyright © 2011-2022 走看看