Vue Healthicons

This package provides a simple and easy-to-use interface for accessing all the healthicons within your Vue projects. You can see the full list of icons at healthicons

healthicons-vue is an open source package that exports these Healthicons as Vue.js components that can be used in all of your Vue projects.

Installation

yarn add healthicons-vue

or

npm i healthicons-vue

Usage

By default filled icons are imported. To import another variant use the following syntax from healthicons-vue/[variant_name] instead.

Vue 3

<script setup>
  import { BloodBag } from 'healthicons-vue';
</script>

<template>
  <BloodBag />
</template>

Vue 2

<script>
  import { BloodBag } from 'healthicons-vue';

  export default
      components: {
          BloodBag
      }
  }
</script>

<template>
  <BloodBag />
</template>

Default values for the most common props are given below:

| Prop name | Default value | | ----------- | -------------- | | color | "currentColor" | | width | "1.5em" | | height | "1.5em" | | strokeWidth | 1.5 | | fill | "none" |

HealthIconsProvider

Tired of specifying the same props for every single icon, every time you use them? So were we. Use HealthIconsProvider to set the default icon props for everything inside HealthIconsProvider.

<script setup>
import { HealthiconsProvider, Check } from 'healthicons-vue';
</script>

<template>
  <HealthiconsProvider
    :icon-props="{
      'color': '#AAAAAA',
      'stroke-width': 1,
      'width': '1em',
      'height': '1em',
    }"
  >
    <Container>
      <Bloodbag />
    </Container>
  </HealthiconsProvider>
</template>

Naming conventions for icons

The Vue components in this package are named using the PascalCase convention, which is a variation of their reference names (e.g. add-circle-outline becomes AddCircleOutline).

| HealthIcons Name | Vue Component | | ---------------- | ---------------------- | | blood-bag | BloodBag |