Vue3 Icons

方案来自：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.

Installation (for standard modern project)

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>

Icons

| Icon Library | License | Version | Count | | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: | | Circum Icons | MPL-2.0 license | 1.0.0 | 288 | | Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 | | Ionicons 4 | MIT | 4.6.3 | 696 | | Ionicons 5 | MIT | 5.5.0 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-61-g511eea577b | 4341 | | Typicons | CC BY-SA 3.0 | 2.1.2 | 336 | | Github Octicons icons | MIT | 8.5.0 | 184 | | Feather | MIT | 4.28.0 | 286 | | Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 | | Weather Icons | SIL OFL 1.1 | 2.0.12 | 219 | | Devicons | MIT | 1.8.0 | 192 | | Ant Design Icons | MIT | 4.2.1 | 789 | | Bootstrap Icons | MIT | 1.10.3 | 2592 | | Remix Icon | Apache License Version 2.0 | 2.5.0 | 2271 | | Flat Color Icons | MIT | 1.0.2 | 329 | | Grommet-Icons | Apache License Version 2.0 | 4.9.0 | 620 | | Heroicons | MIT | 1.0.6 | 460 | | Heroicons 2 | MIT | 2.0.16 | 584 | | Simple Icons | CC0 1.0 Universal | 8.6.0 | 2437 | | Simple Line Icons | MIT | 2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | CC BY 4.0 License | 2.1.4 | 814 | | css.gg | MIT | 2.0.0 | 704 | | VS Code Icons | CC BY 4.0 | 0.0.32 | 423 | | Tabler Icons | MIT | 2.7.0 | 3455 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @modulz/[email protected] | 318 |

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

Configuration

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>;

| Key | Default | Notes | | ----------- | --------------------- | ---------------------------------- | | color | undefined (inherit) | | | size | 1em | | | className | undefined | | | style | undefined | Can overwrite size and color | | attr | undefined | Overwritten by other attributes | | title | undefined | Icon description for accessibility |

Contributing

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

Development

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

Preview

The preview site is the vue3-icons website.

cd packages/vue3-icons
yarn fetch
yarn build

cd ../preview
yarn start

Demo

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

Why Vue3 SVG components instead of fonts?

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.

Licence

MIT

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