dioxus-community / dioxus-free-icons

Use free svg icons in your Dioxus projects easily with dioxus-free-icons.
Other
67 stars 15 forks source link

Fill property doesn't change the icon fill color on Heroicons Solid #17

Closed ElrohirGT closed 1 year ago

ElrohirGT commented 1 year ago

Hi! I'm trying out Dioxus for the first time and I got here because of the Awesome Dioxus Page. I tried to use your library for icons, love that they are type compiled. I have an issue when trying to change the color of the icon from black to white:

use dioxus::prelude::*;
use dioxus_free_icons::icons::hi_solid_icons::*;
use dioxus_free_icons::Icon;

fn main() {
    let log_level = log::Level::Debug;
    wasm_logger::init(wasm_logger::Config::new(log_level));
    dioxus::web::launch(app);
}

fn app(cx: Scope) -> Element {
    let mut count = use_state(&cx, || 0u32);
    let button_class =
        "inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";

    cx.render(rsx!(
        link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" },
        div {
            class: "flex flex-col shrink-0 p-6 items-center justify-center",
            button {
                class: "{button_class}",
                onclick: move |_|{count += 1},
                "High Five!"
            },
            h1 { "High Five counter: {count}"},
            button {
                class: "{button_class}",
                onclick: move |_|{count -= 1},
                "",
                Icon {
                    width: 30,
                    height: 30,
                    fill: "white",
                    icon: HiMinus
                }},
        }
    ))
}

Here's a screenshot of what this code produces on the browser: imagen As you can see, even though the fill property is white, and the button has a style that makes all text white, the icon appears still black. The rendered SVG code is this:

<svg stroke="currentColor" stroke-width="0" class="" height="30" width="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="white"><title></title><path clip-rule="evenodd" d="M3 10C3 9.44772 3.44772 9 4 9L16 9C16.5523 9 17 9.44772 17 10C17 10.5523 16.5523 11 16 11L4 11C3.44772 11 3 10.5523 3 10Z" fill="#374151" fill-rule="evenodd"></path></svg>
ElrohirGT commented 1 year ago

I just tried running the same code but using the font-awesome-solid icons instead, and it worked nicely. I guess it's a problem of the icon perse, as I could read that in the svg description it has an inner fill.

nissy-dev commented 1 year ago

Thank you for reporting issues! I released the new version removing fill property. see: https://github.com/nissy-dev/dioxus-free-icons/releases/tag/v0.5.2