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

    在使用vue开发项目时,会遇到很多使用图标的场景。以使用阿里图标为例,假如你的项目中图标很固定,以后都不会变了,那么随便选择哪种方式的图标都可以。但是如果项目中图标会变,时不时的变个图标或者新增、减少一个图标,比较灵活的场景下使用svg会比较方便一些。

    1、安装包

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

    2、项目中使用的是vue-cli2手脚架的话,配置如下:

    在build文件夹下找到webpack.bae.conf.js,

    module: {
        rules: [
             test: '/.svg$/',
             include: [reslove('src/icon')],
             loader: ''svg-sprite-loader,
             options: {
                  symboId: 'icon-[name]'       
            }          
        ]

    然后在找到如下代码,加上这一行 'exclude: [resolve('src/icons')],'

    {
            test: /.(png|jpe?g|gif|svg)(?.*)?$/,
            loader: 'url-loader',
            exclude: [resolve('src/icons')],
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
    },

    使用cli3配置如下:

    在新建的vue.config.js中,添加以下代码

    const path = require('path')
    function resolve(dir) {
        return path.join(__dirname, dir)
    }
    module.exports = {
        chainWebpack(config){
            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、在src目录下新建文件夹icons,把所有svg文件放进去,然后再新建index.js文件,获取icons目录下的所有svg文件

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

    4、在3步骤,引入了SvgIcon组件,这个需要自己手写代码如下

    <template>
      <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
          <use :href="iconName" />
      </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props:{
          iconClass:{
              type: String,
              require: 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{
         1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        /* overflow: hidden; */
    }
    </style>

    5、在main.js引入

    //全局使用svg
    import './icons'

    6、使用

    <svg-icon :iconName='location' />
  • 相关阅读:
    字符串替换
    字符串查找
    字符串比较
    字节与字符串相互转换
    1365. How Many Numbers Are Smaller Than the Current Number
    1486. XOR Operation in an Array
    1431. Kids With the Greatest Number of Candies
    1470. Shuffle the Array
    1480. Running Sum of 1d Array
    【STM32H7教程】第56章 STM32H7的DMA2D应用之刷色块,位图和Alpha混合
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/13102417.html
Copyright © 2011-2022 走看看