方案来自：react-icons

Include popular icons in your Vue3 projects easily with vue3-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

pnpm add vue3-icons
# or
npm install vue3-icons --save

example usage

<script lang="ts" setup>
import { FaBeer } from 'vue-icons/fa';
</script>
<template>
  <FaBeer />
</template>

You can add more icons by submitting pull requests or creating issues.

You can configure vue3-icons props using vue3 Provider API.

import { IconContextProvider } from "vue3-icons";

<IconContextProvider :value="{ color: 'blue', className: 'global-class-name' }">
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

./build-script.sh will build the whole project. See also CI scripts for more information.

yarn
cd packages/vue3-icons
yarn fetch  # fetch icon sources
yarn build

The preview site is the vue3-icons website.

cd packages/vue3-icons
yarn fetch
yarn build

cd ../preview
yarn start

The demo is a vue3 boilerplate with vue3-icons added as a dependency for easy testing.

cd packages/vue3-icons
yarn fetch
yarn build

cd ../demo
yarn start

SVG is supported by all major browsers. With vue-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

MIT

• Icons are taken from the other projects so please check each project licences accordingly.