用nuxt3官方提供的nuxt-icon插件来引入iconify的海量图标

旧的引用方式

这里我们不用ant蚂蚁框架的图标，我们从iconify从导入图标。

iconify图标是一种矢量图标格式，它可以以小尺寸的形式显示在各种设备上，如移动设备、桌面应用程序和网页。iconify图标可以缩放到任何尺寸而不失真，并且可以通过CSS或JavaScript进行动态更改。Iconify图标还支持多种颜色和主题，使其适合各种不同的设计需求。

可以通过这个网站查看所有图标集，https://icones.js.org/collection/ep

查看文档：https://docs.iconify.design/api/css.html

可以使用 unplugin-icons和@iconify/json 从 iconify 中自动导入任何图标集。 不仅能够按需加载图标，更能使用成千上万的任意图标。更能满足我们开发的需求。

安装

yarn add unplugin-icons  @iconify/json

配置

在nuxt.config.ts里配置，配置图标前缀和你想使用的图标库

//...
import Icons from 'unplugin-icons/vite'
import  IconsResolver  from "unplugin-icons/resolver"

export default defineNuxtConfig({
    css: [
        '~/assets/css/global.scss'
    ],
    //...
    vite: {
        plugins: [
            // 按需引入组件
            Components({
                resolvers: [
                    AntDesignVueResolver({
                        importStyle: 'less' //配置为less
                    }),
                    // 配置图标前缀
                    IconsResolver({
                        prefix:'i',
                        enabledCollections: ['ep','ant-design','mdi-light']
                    })
                ]
            }),
            // 自动
            Icons({
                autoInstall: true,//在 Vue.js的安装过程中自动安装该插件。
                compiler: "vue3" //表示该插件使用的是 Vue3.x 版本的编译器。
            })
        ],
        css:{
          preprocessorOptions: {
              less: {
                  modifyVars: {
                      'primary-color': '#ea6f5a'
                  },
                  javascriptEnabled: true,
              }
          }
        },

        // ssr
        ssr: {
            noExternal: ['ant-design-vue'],
        }
    }
})

使用

<div>
      使用ele的menu图标
      <i-ep-menu/>
      使用antd的menu图标
      <i-ant-design-menu/>
      <i-mdi-light-account/>
    </div>

新的引用方式

现在推荐nuxt官方提供的nuxt-icon插件来引入iconify的海量图标。

用法

• 安装

将nuxt-icon依赖项添加到您的项目中：

npm install --save-dev nuxt-icon

# Using yarn
yarn add --dev nuxt-icon

• 将其添加到nuxt.config.ts文件中：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

• 使用

在<Icon />组件中使用,当使用 Iconify 中的图标时,只需要填入图标的名字即可。

<Icon name="uil:github" color="black" />