iconfont 在vue项目中的应用（icon-component组件）

前言：上一篇记录了iconfont的三种基本使用方法。
     在Vue中应该如何使用呐？Vue中的组件化思想很明确，要提高组件的复用率，增强项目的可维护性，扩展性。以下是采用icontfont的使用方式之symbol封装的icon-component组件。

//components/Icon-svg

//创建 icon-component 组件

<template>

  <svg class="svg-icon" aria-hidden="true">

    <use :xlink:href="iconName"></use>

  </svg>

</template>

<script>

export default {

  name: 'icon-svg',

  props: {

    iconClass: {

      type: String,

      required: true

    }

  },

  computed: {

    iconName() {

      return `#icon-${this.iconClass}`

    }

  }

}

</script>

<style>

.svg-icon {

  width: 1em;

  height: 1em;

  vertical-align: -0.15em;

  fill: currentColor;

  overflow: hidden;

}

</style>

//引入svg组件

import IconSvg from '@/components/IconSvg'

//全局注册icon-svg

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

//在代码中使用

<icon-svg icon-class="password" />

参考：https://juejin.im/post/59bb864b5188257e7a427c09

巴特西

iconfont 在vue项目中的应用（icon-component组件）

最新文章

热门文章