vue3和nuxt3下FontAwesomeIcon图标组件

在VUE3和NUXT3中使用Font-Awesome-Icon 这个SVG图标库优势就不用说了，又多又好用，还不用全库导入成字体导致首页加载慢等问题。 1. 在vue3中components文件夹下建立 FontAwesomeIcon.vue 2. NUXT3中components文件夹下建立FontAwesomeIcon.client.vue 加个client后辍主要是为了标记为客户端渲染。 **VUE3和NUXT3中使用：** ``` `<font-awesome-icon icon="fa-regular fa-thumbs-up" />` ``` **以下为组件代码，直接复制即可。** ``` <template>     <FontAwesomeIcon :icon="icon" /> </template> <script setup> import { library,config} from '@fortawesome/fontawesome-svg-core'; //引入图标库 import {fab} from '@fortawesome/free-brands-svg-icons'; import {far} from '@fortawesome/free-regular-svg-icons'; import {fas} from '@fortawesome/free-solid-svg-icons'; //引入vue支持库 import { FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; //因为默认添加了 nuxt会造成一些错误，所以不自动添加样式 config.autoAddCss = false; //将图标添加到库中 library.add(fab); library.add(far); library.add(fas); const props=defineProps({     icon:{type:String,require:true,default:''}, }); </script> ```