@paratus-medical/paratus-icons
v0.1.38
Published
PARATUS SVG icon library
Readme
Paratus Icons
A beautiful, customizable SVG icon library for Vue and Nuxt applications, featuring a collection of medical and UI icons with consistent styling.
Features
- 60+ carefully crafted SVG icons
- Non-scaling strokes for consistent line weights at any size
- Optimized for Vue 3 and Nuxt 3
- Stroke-based design with
fill="none"by default - Simple API with customizable size and color
Installation
# Install from GitHub
npm install @paratus-medical/paratus-icons
# With yarn
yarn add @paratus-medical/paratus-iconsUsage
Basic Usage
<template>
<div>
<ParatusIcon name="arrow-right" :size="24" color="blue" />
</div>
</template>
<script setup>
import ParatusIcon from '@paratus-medical/paratus-icons';
</script>Available Props
| Prop | Type | Default | Description | |--------|--------|---------------|-----------------------------------| | name | String | (required) | Icon name (see available icons) | | size | Number | 24 | Size in pixels | | color | String | 'currentColor'| Stroke color |
Available Icons
The library includes the following icons:
administration, adult, airway, algorithm, arrow-left, arrow-right, arrow-short-left, arrow-short-right, arrow-short-up, arrow-short-down, calendar, check, checklist, close-circle, close, compatibility, conditions, drugs, equipment, edit, expand, expand2, export, institution, forbiden, frame, gender, gift, graduation, heart, heart-plus, height, lungs, home, medical-pack, menu, neonatal, pack-equipment, paratus-glyph, peds, phone, place, plus, procedures, redo, reference, resuscitation, search, secure-check, secure, slides, star, star-active, user, vitals, warning, weight, weight-adjusted, weight-drug, weight-idealStyling
The icons are designed to be used with strokes only by default (fill="none"). You can customize the stroke color using the color prop.
<!-- Default (uses currentColor) -->
<ParatusIcon name="heart-outline" />
<!-- Custom color -->
<ParatusIcon name="heart-outline" color="#FF0000" />
<!-- Using Tailwind classes -->
<div class="text-blue-500">
<ParatusIcon name="heart-outline" />
</div>Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT © Paratus Medical
