Implementation of the lucide icon library for Vue 3 applications.
What is LAIS Icons? Read it here.
⚠️ This version of lais icons is for Vue 3, For Vue 2 got to @lais_ufrn/icons-vue
yarn add @lais_ufrn/icons-vue-next
or
npm install @lais_ufrn/icons-vue-next
It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a vue component.
You can pass additional props to adjust the icon.
<template>
<Virus color="red" :size="32" />
</template>
<script>
// Returns Vue component
import { Virus } from '@lais_ufrn/icons-vue-next';
export default {
name: 'My Component',
components: { Virus }
};
</script>
name | type | default |
---|---|---|
size |
number | 24 |
color |
string | currentColor |
stroke-width |
number | 2 |
absolute-stroke-width |
boolean | false |
default-class |
string | lucide-icon |
You can also pass custom props that will be added in the svg as attributes.
<template>
<Virus fill="red" />
</template>
It is possible to create one generic icon component to load icons.
⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
<template>
<component :is="icon" />
</template>
<script>
import * as icons from '@lais_ufrn/icons-vue-next';
export default {
props: {
name: {
type: String,
required: true
}
},
computed: {
icon() {
return icons[this.name];
}
}
};
</script>
<template>
<div id="app">
<Icon name="Virus" />
</div>
</template>