{"_id":"@codetab/crst-icon","name":"@codetab/crst-icon","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@codetab/crst-icon","version":"0.0.1","description":"crst-icon is a Vue 3 icon component library","type":"module","main":"./dist/crst-icon.umd.js","module":"./dist/crst-icon.es.js","types":"./dist/index.d.ts","style":"./dist/crst-icon.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/crst-icon.es.js","require":"./dist/crst-icon.umd.js"},"./style.css":"./dist/crst-icon.css"},"scripts":{"build":"vite build","prepare":"npm run build"},"peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.1","rollup-plugin-visualizer":"^5.14.0","vite":"^6.0.11","vue":"^3.0.0"},"keywords":["vue","icons","component-library"],"author":{"name":"codetab"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/codetaab/crst-icon.git"},"bugs":{"url":"https://github.com/codetaab/crst-icon/issues"},"homepage":"https://github.com/codetaab/crst-icon#readme","gitHead":"8f4be659f95a0a269c0d01d932045042ad91f160","_id":"@codetab/crst-icon@0.0.1","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vCuN8vmEMXEy6x8ikSvfgz3BfKlk/frsvN928J4Js8Wzeb4ve2DIJOT+ChrMm236g/ZB7IayuM00dTYiJv4/0g==","shasum":"4db5fac01efcb9e84e6b1a066180261a9e532254","tarball":"https://registry.npmjs.org/@codetab/crst-icon/-/crst-icon-0.0.1.tgz","fileCount":336,"unpackedSize":328021,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCtKpTDwMaN4lo+En8SXObgsJy1bi4WgBqCdxcnmEH2AgIgOzGw5XhvAxiiv25MZYfmk8Vn9JmXXa5Edn8tRHQk0Rk="}]},"_npmUser":{"name":"codetab","email":"hi@codetab.tech"},"directories":{},"maintainers":[{"name":"codetab","email":"hi@codetab.tech"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/crst-icon_0.0.1_1739392572252_0.5366270930739216"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-12T20:36:12.107Z","0.0.1":"2025-02-12T20:36:12.449Z","modified":"2025-02-12T20:36:12.719Z"},"maintainers":[{"name":"codetab","email":"hi@codetab.tech"}],"description":"crst-icon is a Vue 3 icon component library","homepage":"https://github.com/codetaab/crst-icon#readme","keywords":["vue","icons","component-library"],"repository":{"type":"git","url":"git+https://github.com/codetaab/crst-icon.git"},"author":{"name":"codetab"},"bugs":{"url":"https://github.com/codetaab/crst-icon/issues"},"license":"MIT","readme":"# crst-icon\n\nA lightweight and flexible icon library for Vue 3 applications.\n\n## Introduction\n\n`crst-icon` is a Vue 3 library that provides an efficient way to manage and use icons in your applications. It includes a set of default icons and allows you to easily add your own custom icons.\n\nFor detailed documentation and live examples, visit [codetab.tech](https://codetab.tech)\n\n## Features\n\n- 🚀 Vue 3 Support\n- 📦 Built-in Default Icons\n- 🎨 Custom Icon Support\n- 🔧 Easy Configuration\n- 💪 TypeScript Support\n- 🎯 Tree-shakeable\n- 🎭 Customizable Styling\n- ♿ Accessibility Support\n\n## Documentation\n\n- 📚 [Full Documentation](https://codetab.tech/components)\n  <!-- - 🎮 [Interactive Playground](https://codetab.tech/playground) -->\n  <!-- - 🎨 [Icon Gallery](https://codetab.tech/icons) -->\n  <!-- - 💡 [Examples](https://codetab.tech/examples) -->\n  <!-- - 📖 [API Reference](https://codetab.tech/api) -->\n\n## Installation\n\n```bash\nnpm install @codetab/crst-icon\n```\n\nor\n\n```bash\nyarn add @codetab/crst-icon\n```\n\n## Setup Guide\n\n### 1. Register Your Icons\n\nCreate an icons registry file (e.g., `src/icons/index.ts`):\n\n```typescript\n// src/icons/index.ts\nimport { registerIcons } from '@codetab/crst-icon'\n\nconst icons = import.meta.glob('./*.vue')\n\nregisterIcons(icons)\n```\n\n### 2. Set Up Your Main Application\n\nImport and register the component and styles in your main file:\n\n```typescript\n// main.ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport './icons' // Import icons registry\nimport { CrstIcon } from '@codetab/crst-icon'\nimport '@codetab/crst-icon/style.css'\n\nconst app = createApp(App)\napp.component('CrstIcon', CrstIcon)\napp.mount('#app')\n```\n\n### 3. Use in Components\n\nUse the icon component in your templates:\n\n```vue\n<template>\n  <div>\n    <CrstIcon name=\"home\" size=\"md\" />\n  </div>\n</template>\n```\n\n## Using Default Icons\n\nThe library comes with a set of default icons that you can use right away:\n\n```vue\n<template>\n  <CrstIcon name=\"home\" />\n</template>\n```\n\n## Styling Options\n\n### Size Classes\n\nThe library provides predefined size classes:\n\n- `xs` - 1rem (16px)\n- `sm` - 1.5rem (24px)\n- `md` - 2rem (32px)\n- `lg` - 2.5rem (40px)\n- `xl` - 3rem (48px)\n- `2xl` - 4rem (64px)\n- `3xl` - 5rem (80px)\n- `4xl` - 6rem (96px)\n- `5xl` - 7rem (112px)\n- `6xl` - 8rem (128px)\n- `7xl` - 9rem (144px)\n- `8xl` - 10rem (160px)\n- `9xl` - 11rem (176px)\n- `10xl` - 12rem (192px)\n\n```vue\n<CrstIcon name=\"home\" size=\"md\" />\n```\n\n### Color Classes\n\nBuilt-in color variants:\n\n- `primary`\n- `secondary`\n- `success`\n- `warning`\n- `error`\n- `info`\n\n```vue\n<CrstIcon name=\"home\" color=\"primary\" />\n```\n\n### Custom Colors\n\nYou can customize the colors using CSS variables:\n\n```css\n:root {\n  --icon-primary-color: #your-color;\n  --icon-secondary-color: #your-color;\n  --icon-success-color: #your-color;\n  --icon-warning-color: #your-color;\n  --icon-error-color: #your-color;\n  --icon-info-color: #your-color;\n  --icon-focus-color: #your-color;\n}\n```\n\n### Animation\n\nAdd spinning animation to your icon:\n\n```vue\n<CrstIcon name=\"loading\" class=\"css-icon--spin\" />\n```\n\n## Icon Properties\n\n| Prop   | Type   | Default        | Description                    |\n| ------ | ------ | -------------- | ------------------------------ |\n| name   | String | required       | Name of the icon               |\n| size   | String | 'md'           | Size of the icon (xs to 10xl)  |\n| color  | String | 'currentColor' | Color class or CSS color value |\n| rotate | Number | 0              | Rotation degree                |\n\n## TypeScript Support\n\nThe library includes TypeScript declarations out of the box. No additional setup is required.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT License © 2024 [codetab](https://github.com/codetaab)\n\n## Project Setup\n\n```sh\nnpm install\n```\n\n### Compile and Hot-Reload for Development\n\n```sh\nnpm run dev\n```\n\n### Type-Check, Compile and Minify for Production\n\n```sh\nnpm run build\n```\n\n### Lint with [ESLint](https://eslint.org/)\n\n```sh\nnpm run lint\n```\n\n---\n\nBuilt with ❤️ by [codetab.tech](https://codetab.tech).\n","readmeFilename":"README.md"}