v-simple-icons

Simply beautiful open source icons as Vue functional components.

Usage no npm install needed!

<script type="module">
  import vSimpleIcons from 'https://cdn.skypack.dev/v-simple-icons';
</script>

README

v-simple-icons

SupportMe npm npm bundle size NPM NPM downloads

Install

yarn add v-simple-icons

Usage

// Only import what you need!
import { VueJsIcon, AirbnbIcon, ... } from 'v-simple-icons'

See all icons and usage here: https://v-simple-icons.netlify.com

Sizing

By default, icons will be sized based on the font size of the parent element.

You can set a custom size using the size attribute. For multiple based sizing, pass the desired multiple followed by an x.

<vue-js-icon size="1.5x" class="custom-class"></vue-js-icon>

You can also set a px size directly by just passing an integer

<vue-js-icon size="25" class="custom-class"></vue-js-icon>

Tree shaking

By using ES imports like import { VueJsIcon } from 'v-simple-icons' with webpack + minifier or Rollup, unused exports in this module will be automatically eliminated.

To make webpack tree shaking work without using any minifier, you can use the per-file icons from icons directory, e.g. import VueJsIcon from 'v-simple-icons/icons/VueJsIcon'.

Related

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'feat: Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

v-simple-icons amaury-tobias, Released under the MIT License.
Authored and maintained by amaury-tobias with help from contributors

GitHub @amaury-tobias ยท Twitter @amaury-tobias