在 Vue 中编写 SVG 图标组件的方法

<script>
function recursivelyRemoveFill(el) {
 if (!el) {
  return;
 }
 el.removeAttribute('fill');
 [].forEach.call(el.children, child => {
  recursivelyRemoveFill(child);
 });
}
export default {
 name: 'svg-icon',
 props: {
  icon: {
   type: String,
   default: null
  },
  hasFill: {
   type: Boolean,
   default: false
  },
  growByHeight: {
   type: Boolean,
   default: true
  },
 },
 mounted() {
  if (this.$el.firstElementChild.nodeName === 'svg') {
   const svgElement = this.$el.firstElementChild;
   const widthToHeight = (svgElement.clientWidth / svgElement.clientHeight).toFixed(2);
   if (this.hasFill) {
    // recursively remove all fill attribute of element and its nested children
    recursivelyRemoveFill(svgElement);
   }
   // set width and height relative to font size
   // if growByHeight is true, height set to 1em else width set to 1em and remaining is calculated based on widthToHeight ratio
   if (this.growByHeight) {
    svgElement.setAttribute('height', '1em');
    svgElement.setAttribute('width', `${widthToHeight}em`);
   } else {
    svgElement.setAttribute('width', '1em');
    svgElement.setAttribute('height', `${1 / widthToHeight}em`);
   }
   svgElement.classList.add('svg-class');
  }
 }
}
</script>

<template>
 <div v-html="require(`html-loader!../assets/svg/${icon}.svg`)" class="svg-container"></div>
</template>

<style lang="scss" scoped>
.svg-container {
 display: inline-flex;
}
.svg-class {
 vertical-align: middle;
}
</style>

<template>
 <i class="fas fa-smile smile-icon"></i>
</template>

<style lang="scss" scoped>
.smile-icon {
 font-size: 24px;
 color: #aaa;

 &:hover {
 color: #666;
 }
}
</style>

<script>
import SvgIcon from './components/Svg-icon';

export default {
 name: 'my-component',
 components: {
 'svg-icon': SvgIcon,
 },
}
</script>

<template>
 <div class="smile-icon">
 <svg-icon icon="smile-solid" :hasFill="true"></svg-icon>
 </div>
</template>

<style lang="scss" scoped>
.smile-icon {
 font-size: 24px;
 fill: #aaa;

 &:hover {
 fill: #666;
 }
}
</style>

<div class="smile-icon">
 <svg height="1em" width="1em" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="smile" class="svg-inline--fa fa-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
 <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm80 168c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-160 0c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm194.8 170.2C334.3 380.4 292.5 400 248 400s-86.3-19.6-114.8-53.8c-13.6-16.3 11-36.7 24.6-20.5 22.4 26.9 55.2 42.2 90.2 42.2s67.8-15.4 90.2-42.2c13.4-16.2 38.1 4.2 24.6 20.5z">
 </path>
 </svg>
</div>