m3e/icon

icon provides Lustre support for the M3E Icon component

Types

Config

Config holds the configuration for an Icon

pub type Config(msg) {
  Config(
    name: String,
    fill: Fill,
    grade: Grade,
    optical_size: Int,
    purpose: attribute.Attribute(msg),
    variant: Variant,
    weight: Int,
  )
}

Constructors

Config(
  name: String,
  fill: Fill,
  grade: Grade,
  optical_size: Int,
  purpose: attribute.Attribute(msg),
  variant: Variant,
  weight: Int,
)

Fill

</>

Fill specifies if the icon is filled or not

pub type Fill {
  Filled
  NotFilled
}

Constructors

```
Filled
```
```
NotFilled
```

Grade

</>

The Grade of the variable font icon Refer

pub type Grade {
  Low
  Medium
  High
}

Constructors

```
Low
```
```
Medium
```
```
High
```

Icon

opaque </>

Icon is the basis for a m3e-icon element that uses Material Symbols

Fields:

name: The icon to load, Refer to Material Symbols
fill: is the icon filled or not (the FILL axis of the variable font)
grade: the stroke thickness of an icon (the GRAD axis of the variable font)
optical_size: the optical size of the icon. Between 20 and 48
purpose: the role of the icon
variant: the visual style of the icon
weight: the thickness and boldness of the icon’s strokes. Between 100 and 700

pub opaque type Icon(msg)

OpticalSize

</>

The Optical Size of the variable font icon Refer

pub type OpticalSize =
  Int

Variant

</>

The Variant of the icon

pub type Variant {
  Outlined
  Rounded
  Sharp
}

Constructors

```
Outlined
```
```
Rounded
```
```
Sharp
```

Weight

</>

The Weight of the variable font icon Refer

pub type Weight =
  Int

Values

default_config

</>

pub fn default_config() -> Config(msg)

default_config creates a new Config with default values

default_fill

</>

pub const default_fill: Fill

default_grade

</>

pub const default_grade: Grade

Default grade

default_optical_size

</>

pub const default_optical_size: Int

The default optical size of the icon

default_variant

</>

pub const default_variant: Variant

Default variant

default_weight

</>

pub const default_weight: Int

The default weight of the icon

filled

</>

pub fn filled(i: Icon(msg), fill: Fill) -> Icon(msg)

filled sets the fill field

from_config

</>

pub fn from_config(c: Config(msg)) -> Icon(msg)

from_config creates an Icon from a Config record

grade

</>

pub fn grade(i: Icon(msg), g: Grade) -> Icon(msg)

grade sets the grade field

largest_optical_size

</>

pub const largest_optical_size: Int

The largest optical size

largest_weight

</>

pub const largest_weight: Int

The largest weight of the icon

new

</>

pub fn new(name: String) -> Icon(msg)

new constructs an Icon for the named Material Symbol. All fields are set to defaults

Parameters:

name: the name of the Material Symbol used in this Icon

optical_size

</>

pub fn optical_size(i: Icon(msg), os: Int) -> Icon(msg)

optical_size checks and then sets the optical_size field

purpose

</>

pub fn purpose(
  i: Icon(msg),
  p: attribute.Attribute(msg),
) -> Icon(msg)

purpose sets the purpose field

render

</>

pub fn render(
  i: Icon(msg),
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

render creates an m3e-icon Lustre custom element from an Icon

Parameters:

i: the Icon on which the element is based
attributes: additional HTML attributes
children: child HTML elements

render_config

</>

pub fn render_config(
  config: Config(msg),
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

render_config creates a Lustre Element directly from a Config

smallest_optical_size

</>

pub const smallest_optical_size: Int

The smallest optical size of the icon

smallest_weight

</>

pub const smallest_weight: Int

The smallest weight of the icon

variant

</>

pub fn variant(i: Icon(msg), v: Variant) -> Icon(msg)

variant sets the variant field

weight

</>

pub fn weight(i: Icon(msg), w: Int) -> Icon(msg)

weight sets the weight field