https://github.com/nanofuxion/lightning-solid-mdl-icons

Google MDL Icon components for @lightningjs/solid
https://github.com/nanofuxion/lightning-solid-mdl-icons

Last synced: about 2 months ago
JSON representation

Google MDL Icon components for @lightningjs/solid

• Host: GitHub
• URL: https://github.com/nanofuxion/lightning-solid-mdl-icons
• Owner: nanofuxion
• License: mit
• Created: 2023-11-08T01:28:52.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-12T09:21:52.000Z (about 1 year ago)
• Last Synced: 2024-10-14T07:57:42.391Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.16 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# lightning-solid-mdl-icons

Introducing Google MDL Icon components for @lightningjs/solid - a sophisticated and efficient solution for incorporating Material Design icons in LightningJS/Solid applications.

## Setup

### Installation

To integrate `lightning-solid-mdl-icons` into your project, use one of the following package managers:

- npm: `npm install @yfuu/lightning-solid-mdl-icons`

- yarn: `yarn add @yfuu/lightning-solid-mdl-icons`

- bun: `bun x pnpm add @yfuu/lightning-solid-mdl-icons`

### Configuration 

To configure, in `AppCoreExtensions.js` make the following changes:

1. Import `Fonts` from `@yfuu/lightning-solid-mdl-icons`:

   ```javascript

   import { Fonts } from "@yfuu/lightning-solid-mdl-icons";

   ```

2. In the `run` method of `AppCoreExtension`, add the following code:

   ```typescript

   Fonts.map(font => {

       stage.fontManager.addFontFace(font);

   });

   ```

### Usage

The naming convention for components is straightforward and intuitive:

- Each component's name begins with a capitalized icon name followed by `Icon`, e.g., `HomeIcon`, `SearchIcon`, `DesignservicesIcon`.

- Names are not in camel case; only the first letter of the icon name and the 'I' in 'Icon' are capitalized.

- For names starting with a number, prepend an underscore, e.g., `_123Icon` becomes `_3mpIcon`.

#### Props

- `type`: Determines the font type of the icon, as defined in the `FontTypes` enum. For example, `FontTypes.rounded`.

- `color`: Sets the icon's color, adhering to LightningJS/Solid style color specifications.

- `size`: Specifies the icon's size, following LightningJS/Solid style size units.

- `focusedColor`: Defines the icon's color when focused, in line with LightningJS/Solid style color properties.

- `focusedSize`: Determines the icon's size when focused, using LightningJS/Solid style size units.

#### Example

```typescript

import { HomeIcon } from "@yfuu/lightning-solid-mdl-icons";

import { FontTypes } from "@yfuu/lightning-solid-mdl-icons";

```

## Authors

- [@nanofuxion](https://www.github.com/nanofuxion)