crst-icon v1.0.0

Crst icon

important note

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?

Crst icon it is a vue component wrraper for svg icon, you need to create your own svg icons. depending on your needs.

Installation

npm i crst-icon

Before use

You need to create your own svg icons components and put them in a folder like this:

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:

<template>
  <div>
    <crst-icon name="community" />
  </div>
</template>

Not like this:

<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?

1. Import the component in your vue file

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

2. Then register it in your vue file if you are not useing the <script setup> syntax

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

<crst-icon name="icon-name" />

With other props:

<crst-icon :name="iconName" :size="iconSize" :color="iconColor" :rotate="iconRotate" />

Also you can use the Composable function to customize the icon

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:

<template>
  <span :class="['css-icon', computedSize, computedColor]" :style="computedRotate">
    <component :is="icon" :aria-label="`${ariaLabel || computedAriaLabel}-icon`" :class="props.name"/>
  </span>
</template>

Props

Css Classes

Main Class

Size Classes

css variables

Composable

Full example

<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?

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

Distributed under the MIT License. See LICENSE for more information.