在Vue3+vite+ts中引入iconfont矢量图标库

        随着iconfont的更新，还有前端技术的发展，越来越多的人用了vue3+vite+ts了，鄙人最近正好在写一个基于这些技术搭建的项目，也是从小白一路慢慢摸索的。所以鄙人借csdn平台，记录一下自己的心路历程。

        鄙人在项目中引入iconfont只用了以下这种方式，所以鄙人也只会介绍这一种。

step 1 ：首先你要有一个自己的iconfont项目库 ；

 step 2 ：用 npm create vite@latest 搭建一个项目，这个步骤就不详说了，在网上随便一搜，都可

                以搜的到，而且比我的更详细；

step 3 ：我这里介绍的是用svg的方法来引入的iconfont，那么进入正式步骤吧；

        1：选择自己创建的项目中的symbol这里，查看一下在线链接，

         2：点击这条链接，你会发现密密麻麻的代码，全选并赋值；

         3：在自己项目中的 assents 中新建一个文件夹，并在文件夹下面，新建一个 js 文件

                 将从链接复制的内容粘贴到里面；

         4：封装一下 icon

<template>

    <svg :class="svgClass" aria-hidden="true">

        <use :xlink:href="iconClassName" :fill="color" />

    </svg>

</template>

<script setup lang="ts">

import { computed } from 'vue';

const props = defineProps({

    iconName: {

        type: String,

        required: true

    },

    className: {

        type: String,

        default: ''

    },

    color: {

        type: String,

        default: '#5c6b77'

    }

});

// 图标在 iconfont 中的名字

const iconClassName = computed(() => {

    return `#${props.iconName}`;

})

// 给图标添加上类名

const svgClass = computed(() => {

    if (props.className) {

        return `svg-icon ${props.className}`;

    }

    return 'svg-icon';

});

</script>

<style scoped>

.svg-icon {

    width: 1em;

    height: 1em;

    position: relative;

    fill: currentColor;

    vertical-align: -2px;

}

</style>

        5：接下来就是main.ts 中的内容了

         6：最后再试一下，全局注册的组件不需要引入，可以直接在vue页面中使用；

         7：上效果；

         最后总结一下，如果有兄弟按照我这个步骤写完之后不能显示，那么可能的主要问题是：你的iconfont中没有对应的图标，或者你的引入路径出错了，再或者你在使用的时候出错了，这里的封装其实就是父子传值，所以你只需要按照父子传值的那种方法正确的传值，应该就不会出错了。

最后

以上就是瘦瘦狗为你收集整理的在Vue3+vite+ts中引入iconfont矢量图标库的全部内容，希望文章能够帮你解决在Vue3+vite+ts中引入iconfont矢量图标库所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。