Vue Icons Plus

Vue icons plus icons total 50000+, support Vue 3/Vue 2.7+, allowing you to easily import and use them directly in Vue projects.

Installation (for standard modern project)

yarn add vue-icons-plus
# or
npm install vue-icons-plus --save

Example usage for Vue 3

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "vue-icons-plus/fa";
  export default {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Uniapp

<template>
  <view>
    <BiSearch />
  </view>
</template>

<script lang="uts">
  import { BiSearch } from 'vue-icons-plus/bi';
  export default {
    components: {
      BiSearch
    },
  }
</script>

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under vue-icons-plus you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'vue-icons-plus/md';

Installation (for Webpack 3, etc)

Due to npm restrictions, only supports: ai、bi、bs、cg、ci、di、fa、fa6、fc、fi、gi、go、gr、hi、hi2、im、io、lia.

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.

yarn add @vue-icons-plus/all-files
# or
npm install @vue-icons-plus/all-files --save

Example usage for Vue 3

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
  export defautls {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Icons

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

Configuration

You can change the size, color, and so on of icons through props.

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer size="48" color="#333" />
  </div>
</template>

Props

Contributing

Development

yarn
cd packages/core
yarn fetch  # fetch icon sources
yarn build

Licence

MIT

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