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.
- 🎨 Customizable colors and sizes
- 💪 TypeScript support
- 🔧 Tree-shakeable
- 🎯 ESM and UMD builds
- 📦 Small bundle size
- 🎉 Vue 3 compatible
npm install @yoosuf/icons<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>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 |
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- 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 packageChanges 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 unlinkContributions 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.
If you find any bugs or have feature requests, please create an issue at GitHub Issues.
- GitHub Repository: https://github.com/yoosuf/icons
- Bug Reports: https://github.com/yoosuf/icons/issues
- Documentation: https://github.com/yoosuf/icons#readme
MIT © [Yoosuf]