@yoosuf/icons NPM

@yoosuf/icons

A comprehensive collection of SVG icons for Vue 3 applications, built with TypeScript and Vite. Each icon is optimized for Vue 3 and supports customization through props.

Features

🎨 Customizable colors and sizes
💪 TypeScript support
🔧 Tree-shakeable
🎯 ESM and UMD builds
📦 Small bundle size
🎉 Vue 3 compatible

Installation

npm install @yoosuf/icons

Usage

<template>
  <div>
    <ActivityIcon class="icon" :width="24" :height="24" fill="currentColor" />
    <UserIcon class="icon" :width="32" :height="32" fill="#FF5733" />
  </div>
</template>

<script setup lang="ts">
import { ActivityIcon, UserIcon } from '@yoosuf/icons';
</script>

<style scoped>
.icon {
  margin: 0 8px;
}
</style>

Props

Each icon component accepts the following props:

Prop	Type	Default	Description
width	String	'24'	Icon width
height	String	'24'	Icon height
fill	String	'currentColor'	Fill color
stroke	String	'none'	Stroke color
class	String	''	CSS class
style	String	''	Inline styles
viewBox	String	'0 0 24 24'	SVG viewBox
ariaHidden	Boolean	true	Sets aria-hidden attribute

Local Development

Building the Package

Clone the repository:

git clone https://github.com/yoosuf/icons.git
cd icons

Install dependencies:

npm install

Build the package:

npm run build

Local Testing with npm link

In the icons package directory, create a global symlink:

cd /path/to/icons
npm link

In your test project, link to the icons package:

cd /path/to/your-project
npm link @yoosuf/icons

Import and use the icons in your project:

<template>
  <ActivityIcon width="32" height="32" fill="#42b883" />
</template>

<script setup lang="ts">
import { ActivityIcon } from '@yoosuf/icons';
</script>

When making changes to the icons package:

cd /path/to/icons
npm run build  # Rebuild the package

Changes will be immediately reflected in your test project.

To unlink when done testing:

# In your test project
npm unlink @yoosuf/icons

# In the icons package
npm unlink

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.