5. 将字体图标文件封装成 Vue 组件

简单封装示例

定义图标组件

<template>
<span 
  :class="[name,{
    iconstyle:true,
  }]" 
  
  v-if="colorVal && sizeVal"

  :style="{'color': colorVal}" 
></span>
<span 
  :class="[name,{
    iconstyle:true,
  }]" 
  
  v-else-if="colorVal"

  :style="{'color': colorVal}" 
></span>

<span 
  :class="[name,{
    iconstyle:true,
  }]" 
  v-else-if="sizeVal"
  
  :style="{'font-size': sizeVal}" 
></span>

<span 
  :class="[name,{
    iconstyle:true,
  }]" 
  v-else
></span>
</template>

<script lang="ts">
import { 
  defineComponent, ref, 
} from 'vue';

export default defineComponent({
  name: 'my-icon',
  props:{
    name:{
      type:String,
      default:'icon-image'
    },
    size:String,
    color: String,
  },

  setup(props){
    let colorVal = undefined;
    if(props.size){
      colorVal = ref(props.color)
    }
    
    let sizeVal = undefined;
    if(props.size){
      sizeVal = ref(props.size.toString()+'px');
    }
    return {
      colorVal,
      sizeVal
    }
  }
});
</script>

<style lang="scss" scoped>
@import "./style.css";
.iconstyle{
 margin: 0;
 padding: 0;
}

</style>

全局安装组件：

import IconVue from 'Icon.vue';      // 你组件文件的位置 
import type { App, Component } from 'vue';


const components: Component[] = [
  IconVue,
  // ...其它你想安装的组件
]

export const MyComponents = {
  install:(app: App<Element>)=>{
    components.forEach(component =>{
      app.component((component as any).name, component)
    })
  }
}

在 main.ts中：

import { createApp } from 'vue'
import App from './App.vue'
import { MyComponents } from './components'; // 上面定 MyComponents 的 ts 文件地址

const app = createApp(App);
app.use(MyComponents);
app.mount('#app');

使用举例：

<template>
  <my-icon name="jcicon-toggle-left"></jc-icon>
</template>