sushi-rs 0.0.1

🍣 A highly customizable SVG sushi component for WASM frameworks like Yew, Dioxus, and Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# 🧬 Sushi RS Dioxus Usage

Adding Sushi RS to your Dioxus project:

1. Set up Dioxus using the [Getting Started Guide](https://dioxuslabs.com/learn/0.7/getting_started).

1. Add the dependency:

   ```sh
   cargo add sushi-rs --features=dio
   ```

## 🛠️ Usage

```rust
use dioxus::prelude::*;
use sushi_rs::dioxus::Sushi;
use sushi_rs::common::{SushiShape, Ingredient, SushiOuterSheet, SushiSize, NORI_COLOR};

fn App() -> Element {
    rsx! {
        Sushi {
            id: "salmon-maki",
            name: "Salmon Maki",
            shape: SushiShape::Circular,
            ingredients: vec![Ingredient::Salmon],
            outer_sheet: SushiOuterSheet { color: NORI_COLOR.into(), thickness: 10.0 },
            size: SushiSize { width: 120.0, height: 120.0 },
        }
    }
}
```

### Gallery

```rust
use dioxus::prelude::*;
use sushi_rs::dioxus::SushiGallery;
use sushi_rs::common::default_sushi_gallery;

fn App() -> Element {
    rsx! { SushiGallery { items: default_sushi_gallery() } }
}
```

## 🔧 Props

### `Sushi` Component

| Prop          | Type                        | Description               | Default         |
| ------------- | --------------------------- | ------------------------- | --------------- |
| `id`          | `String`                    | SVG namespace ID          | `"sushi"`       |
| `name`        | `String`                    | Display name / ARIA label | `"Custom Roll"` |
| `shape`       | `SushiShape`                | Silhouette shape          | `Circular`      |
| `state`       | `SushiState`                | `Rolled` or `Exploded`    | `Rolled`        |
| `view`        | `SushiView`                 | `Top` or `Front`          | `Top`           |
| `ingredients` | `Vec<Ingredient>`           | Inner fillings            | `[Salmon]`      |
| `outer_sheet` | `SushiOuterSheet`           | Nori colour + thickness   | nori defaults   |
| `size`        | `SushiSize`                 | Width × height in px      | `120×120`       |
| `rice_color`  | `Option<String>`            | Custom rice colour        | cream-white     |
| `top_edge`    | `Option<TopEdgeDecoration>` | Rim decoration            | `None`          |
| `scale`       | `f64`                       | Uniform scale factor      | `1.0`           |
| `class`       | `&'static str`              | Extra CSS class           | `""`            |
| `style`       | `&'static str`              | Inline wrapper style      | inline-block    |

## 💡 Notes

- Uses `dangerous_inner_html` to embed the shared SVG string engine.
- All `<g>` groups carry `role="img"` and `<title>` for screen readers.
- `SushiState::Exploded` renders all layers side by side.