# crst-icon

> Crst icon is a vue 3 icon component for svg icons

Latest version **1.0.0** (published 2022-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install crst-icon
pnpm add crst-icon
yarn add crst-icon
bun add crst-icon
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-09-26 |
| First published | 2022-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 37.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ahmed-fared |

## Links

- npm: https://www.npmjs.com/package/crst-icon
- npm.io page: https://npm.io/package/crst-icon

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.38

## Recent versions

- 1.0.0 (latest) — 2022-09-26

## README

<!-- Readme file -->
# Crst icon 

## important note
<!-- Warrnig -->
> This is a vue component for icon, it is not a icon font, it is a svg icon
> All Versions under 1.0.0 is not stable, please dont use it. it just for testing

<!-- What is Crst icon? -->
## What is Crst icon?
Crst icon it is a vue component wrraper for svg icon, you need to create your own svg icons. depending on your needs.

<!-- Installation -->
### Installation
```bash
npm i crst-icon
```

<!-- Before use -->
### Before use
You need to create your own svg icons components and put them in a folder like this:
```bash
src
└───icons
    │   CommunityIcon.vue
    │   DocumentationIcon.vue
    │   EcosystemIcon.vue
    │   ...
```
The name of the file is the name of the icon, and the name of the component is the name of the icon with the suffix `Icon` like `CommunityIcon.vue`
no need to import the icons, the component will do it for you. you just need to put them in the folder.

When you use the component you need to pass the name of the icon as a prop like this:
```vue
<template>
  <div>
    <crst-icon name="community" />
  </div>
</template>
```

Not like this:
```vue
<template>
  <div>
    <crst-icon name="community-icon" />
  </div>
</template>
```
> Note if the name of the icon not found the component will throw an error and will not render anything.

<!-- How to use Crst icon? -->
## How to use Crst icon?
1. Import the component in your vue file

```js
import { CrstIcon } from 'vue-crst-icon'
```
2. Then register it in your vue file if you are not useing the `<script setup>` syntax
```js
components: {
    CrstIcon
}
```
> IF you are using the `<script setup>` syntax you don't need to register the component

3. Then you can use it in your template
```html
<crst-icon name="icon-name" />
```
With other props:
```html
<crst-icon :name="iconName" :size="iconSize" :color="iconColor" :rotate="iconRotate" />
```
Also you can use the Composable function to customize the icon 
```js

import { useIcon } from 'vue-crst-icon'

const props = defineProps<{
  name?: string; // icon name
  color: string; // icon color
  size: string; //  icon sizes 'xs: 12x12' 'sm: 16x16'  | 'md: 32x32' | 'lg: 48x48' | 'xl: 64x64 | '2xl: 128x128 | '3xl: 256x256'
  ariaLabel?: string; // 'aria-label'
  rotate?: number; // transform: rotate([number]deg)
}>();


const {
  icon,
  computedColor,
  computedSize,
  computedRotate,
  computedAriaLabel
} = useIcon(props)

```

Then you can use the computed props in your template:
```html
<template>
  <span :class="['css-icon', computedSize, computedColor]" :style="computedRotate">
    <component :is="icon" :aria-label="`${ariaLabel || computedAriaLabel}-icon`" :class="props.name"/>
  </span>
</template>
```

<!-- Props -->
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| name | String | - | icon name |
| size | String | - | icon sizes `xl => 64px lg => 48px, md => 32px, sm => 24px, xs => 16px` |
| color | String | - | icon color |
| rotate | Number | 0 | icon rotation |

<!-- Css Classes -->
### Css Classes
<!-- Main Class -->
#### Main Class
| Name | Description |
| --- | --- |
| .css-icon | the main class of the component |

<!-- Size Classes -->
#### Size Classes
| Name | Description |
| --- | --- |
| .css-icon--xl | the class for the `xl` size |
| .css-icon--lg | the class for the `lg` size |
| .css-icon--md | the class for the `md` size |
| .css-icon--sm | the class for the `sm` size |
| .css-icon--xs | the class for the `xs` size |

<!-- css variables -->
### css variables
| Name | Description |
| --- | --- |
| --css-flex | the flex value of the component |
| --css-align-items | the align-items value of the component |
| --css-justify-content | the justify-content value of the component |
| --css-size-xl | the size of the `xl` size |
| --css-size-lg | the size of the `lg` size |
| --css-size-md | the size of the `md` size |
| --css-size-sm | the size of the `sm` size |
| --css-size-xs | the size of the `xs` size |

<!-- Composable -->
### Composable
| Name | Type | Description |
| --- | --- | --- |
| useIcon | Function | the composable function for the component |

<!-- Full example -->
### Full example
```vue
<template>
  <div>
    <crst-icon name="community" :size="iconSize" :color="iconColor" :rotate="iconRotate" />
    <crst-icon name="documentation" :size="iconSize" :color="iconColor" :rotate="iconRotate" />
    <crst-icon name="ecosystem" :size="iconSize" :color="iconColor" :rotate="iconRotate" />
  </div>
</template>

<script setup>
import { CrstIcon } from 'vue-crst-icon'
</script>
```

<!-- How to contribute? -->
## How to contribute?
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a pull request

<!-- License -->
## License
Distributed under the MIT License. See `LICENSE` for more information.

---
_Source: https://npm.io/package/crst-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._