render it as a yew component

[Madoshakalaka]

I'm interested in adding yew support for this so it can be rendered as a <QrCode style="..." on_click=.../> svg component that accepts attributes.

I have been using this crate in my yew application for quite a while now with some workaround:

1. I wrap the svg code with my own svg tag and parse for the viewBox of the inner svg
2. I use Html::from_html_unchecked provided by yew to turn it into a Html yew can recognize the workaround code looks like the following:

#[autoprops]
#[function_component]
pub fn QrCode(url:&AttrValue, height: &AttrValue) -> Html {
    let code = QrCode::with_version(&url, Version::Normal(3), EcLevel::L).unwrap();
    let image = code.render().dark_color(svg::Color("#000000")).light_color(svg::Color("#ffffff")).build();

    let view_box = {
        let mut view_box = String::new();
        let index = image.find("viewBox=\"").unwrap() + 9;
        let mut i = index;
        while image.chars().nth(i).unwrap() != '"' {
            view_box.push(image.chars().nth(i).unwrap());
            i += 1;
        }
        view_box
    };

    html! { <svg viewBox={view_box} style={format!("height: {height}; aspect-ratio: 1 / 1;")} >{ Html::from_html_unchecked(image.into()) }</svg> }
}

[Madoshakalaka]

I made a usable prototype in the draft PR https://github.com/kennytm/qrcode-rust/pull/76

[kennytm]

I think it is better to add a renderer that only renders the SVG path code.render::<svg::PathCommand>().build() that produces a string like "M1 2h3v4h-3zM5 6h3v4h-3z", then you use this string inside your html! {} stuff. This package should not depend on yew.