This package provides a simple Vue.js component to easily incorporate Material Symbols icons into your project. Material Symbols are a versatile set of icons suitable for various applications.
You can install the package via npm:
npm install lilasia-icons
or via yarn:
yarn add lilasia-icons
First, import the Icon
component into your Vue application:
<script setup lang="ts">
import 'lilasia-icons/dist/style.css'
import Icon from 'lilasia-icons'
</script>
<template>
<div>
<Icon name="home" />
</div>
</template>
The Icon
component accepts the following props:
name
(string, required): The name of the Material Symbol icon.filled
(boolean, optional): Whether the icon should be filled. Default isfalse
.size
(number | string, optional): The size of the icon. Default is24
.
<script setup lang="ts">
import 'lilasia-icons/dist/style.css'
import Icon from 'lilasia-icons'
</script>
<template>
<div>
<Icon name="add_circle" :size="30" filled />
<Icon name="delete" :size="30" />
<Icon name="search" :size="30" />
</div>
</template>
If you want to customize the icon style, just override this:
.lilasia-icon {
color: inherit;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}