zlnew/lilasia-icons

Lilasia Icons

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.

Installation

You can install the package via npm:

npm install lilasia-icons

or via yarn:

yarn add lilasia-icons

Usage

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>

Props

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 is false.
• size (number | string, optional): The size of the icon. Default is 24.

Example

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

Style Customization

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;
}