Importable VueJS components for all icons in @fishtank/icons


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @fishtank/icons-vue in KB


Fishtank Vue Icons

@fishtank/icons-vue is an NPM module which allows all icons from the Fishtank Design System to be imported directly as VueJS modules without the need for any sort of Webpack loaders or other complicated build pipeline.


npm install @fishtank/icons-vue

Basic Usage Instructions

Each of the icons in the system can be imported via a CamelCase name matching its official definition and added to your Vue component:

import Vue from 'vue'
import { Calendar24 as CalendarIcon } from '@fishtank/icons-vue'

export default Vue.extend({
  components: {

Then in your view template:



This package is autogenerated by walking the icon files in the @fishtank/icons npm module's dist/ directory. The primary javascript build relies on RollupJS and a custom plugin to generate the javascript based on the aforementioned dist/ directory. There is also a utility build process which produces a compatible typescript definition file.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.