element svg-icon使用

清疚 2022-12-24 00:50 171阅读 0赞

## 注册svg-icon组件，并引入svg ##

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)

<template>
      <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
      <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
      </svg>
    </template>
    
    <script>
    // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
    import {  isExternal } from '@/utils/validate'
    
    export default { 
      name: 'SvgIcon',
      props: { 
        iconClass: { 
          type: String,
          required: true
        },
        className: { 
          type: String,
          default: ''
        }
      },
      computed: { 
        isExternal() { 
          return isExternal(this.iconClass)
        },
        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 { 
      width: 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>

## mian.js中引入 ##

import './icons' // icon

## 使用 ##