leptos-use/examples/use_favicon/src/main.rs

use leptos::*;
use leptos_use::docs::demo_or_body;
use leptos_use::{use_favicon_with_options, UseFaviconOptions};

#[component]
fn Demo(cx: Scope) -> impl IntoView {
    let (_, set_icon) = use_favicon_with_options(
        cx,
        UseFaviconOptions::default().base_url("use_favicon/demo/img/"),
    );

    let classes = "border border-solid border-b-4 rounded p-2 block border-gray-500/50 bg-[--bg] active:translate-y-1 active:border-b".to_string();
    let img_classes = "block".to_string();

    view! { cx,
        <p>"Click on an icon to change the favicon"</p>
        <p class="flex gap-2">
            <a class=classes.clone() href="#" on:click=move |e| {
                e.prevent_default();
                set_icon(Some("favicon-leptos.ico".into()));
            }>
                <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-leptos.ico" alt="favicon-red" />
            </a>

            <a class=classes.clone() href="#" on:click=move |e| {
                e.prevent_default();
                set_icon(Some("favicon-red.svg".into()));
            }>
                <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-red.svg" alt="favicon-red" />
            </a>

            <a class=classes.clone() href="#" on:click=move |e| {
                e.prevent_default();
                set_icon(Some("favicon-green.svg".into()));
            }>
                <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-green.svg" alt="favicon-green" />
            </a>

            <a class=classes.clone() href="#" on:click=move |e| {
                e.prevent_default();
                set_icon(Some("favicon-blue.svg".into()));
            }>
                <img class=img_classes.clone() width="32" src="use_favicon/demo/img/favicon-blue.svg" alt="favicon-blue" />
            </a>

            <a class=classes.clone() href="#" on:click=move |e| {
                e.prevent_default();
                set_icon(Some("favicon-orange.svg".into()));
            }>
                <img class=img_classes width="32" src="use_favicon/demo/img/favicon-orange.svg" alt="favicon-orange" />
            </a>
        </p>
    }
}

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();

    mount_to(demo_or_body(), |cx| {
        view! { cx, <Demo /> }
    })
}