vue3+ts 项目 全局 使用 阿里巴巴 icon 图标库

资源准备

• 阿里巴巴图标库-[iconfont-阿里巴巴矢量图标库](www.iconfont.cn/)

• 选择图标加入购物车

• 加入购物车

• 打开购物车 ； 点击添加项目 或者 加入项目； 项目可新建

• 进入项目后 点击 font class 然后下载本地 zip

• 点击解压文件，这是解压好的文件的样子；

上号！！！vsc

• 进入vue3 项目； 在src下的assets下创建 font 和 iconfonts 然后如图所示把文件放进去

• src下创建 styles 然后把 iconfonts.css 放进去；再把该文件 引导 main.ts 中；

• 打开iconfont.css文件;如图所示 修改文件的路径；

• 封装 icon 组件；在src下的components下创建 index.ts

import type { App } from 'vue';
// 组件

// nav
import Nav from '@/components/nav';

// 组件集合
const components = [Icon, Nav];

// 抛出
export default {
    install(app: App) {
        components.map(item => app.use(item));
    }
};

• src/components 创建 icon 文件夹 ；如图

• src/components/icon/src/Icon.vue

<template>
    <i :class='`${iconFontAllName}`' :style="{ fontSize: `${size}rem`, color: color }"></i>
</template>

<script lang="ts" setup>

import { computed } from 'vue';
const props = defineProps({
    // icon 名称 必传 否则报错
    iconName: {
        type: String,
        required: true,
    },
    // icon 大小  单位rem 默认 1  
    size: {
        type: Number,
        default: 1
    },
    // icon 颜色  默认  粉色
    color: {
        type: String,
        default: "palevioletred"
    }
});
// 拼接 class
const iconFontAllName = computed(() => {
    if (props.iconName) {
        return `iconfont ${props.iconName}`
    }
});
</script>

• src/components/icon/index.ts

import type { App } from 'vue';

import Icon from './src/Icon.vue';

export default {
    install(app: App) {
        app.component('m-icon', Icon);
    }
}

• main.ts

import { createApp } from 'vue';
import App from './App.vue'
// 组件
import MUI from '@/components';
// 路由
import router from './router';
// icon 
import '@/assets/styles/iconfont.css';

const app = createApp(App);

app.use(router).use(MUI).;

app.mount('#app')

• 调用： 改组件无需引入 icon 组件；因为 在components中定义的组件已经全部挂载到全局了；

<template>
    <div class="a">
        <m-icon :iconName="'icon-wode1'" :color="'#000000'"></m-icon>
        唱歌
    </div>
</template>

• 🐓🐓打开新世界！

---