nuxt3+vue3 SVG组件封装

一只程序袁

已于 2023-07-14 16:26:29 修改

阅读量615

点赞数

文章标签： vue.js 前端 javascript 前端框架

于 2023-07-14 16:19:52 首次发布

本文链接：https://blog.csdn.net/Andydahua/article/details/131721619

版权

nuxt3+vue3 引入阿里图标库并将其封装成组件

1.首先去阿里图标库选择你要使用的图标

在这里插入图片描述

2.选择格式下载图标至本地

![在这里插入图片描述](https://img-blog.csdnimg.cn/81a9889e24994f7c93b9d95cb945f8ff.png

3.下载后放到自己的文件夹下

在这里插入图片描述

4. 在plugins文件夹下新建一个iconfont.js文件导出文件

在这里插入图片描述

import '~/assets/iconfont/iconfont.css';
import '~/assets/iconfont/iconfont.js';
export default true

5.新建一个文件夹图标组件

在这里插入图片描述

<template>
  <svg class="icon-font">
    <use :xlink:href="`#icon-${icon}`"></use>
  </svg>
</template>

<script setup lang="ts">
import {defineProps} from 'vue'
const props = defineProps({
  icon: {
    type: String,
    default: "quanjingshijiao",
  },
});
</script>

<style scoped>

</style>

![在这里插入图片描述](https://img-blog.csdnimg.cn/68e0343808924b94afa9af274f793e9d.png

6.在plugins文件夹下新建个iconComponent.js文件

在这里插入图片描述

import {defineNuxtPlugin} from '#app';
import icon from '../components/svgIcon/index.vue';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp
        .use(icon)
});

7.直接在代码中使用就好啦不需要引入组件

在这里插入图片描述

<div class="user-opera">
            <svgIcon class="icon-shezhi" @click="changeSetUp" icon="shezhi"></svgIcon>
            <svgIcon class="icon-kefu" icon="kefu1" @click="getShowAgreement"></svgIcon>
          </div>