Skip to content

Latest commit

 

History

History
89 lines (61 loc) · 3.4 KB

README.md

File metadata and controls

89 lines (61 loc) · 3.4 KB

yew_icons

Icons Gallery Latest Version

This crate makes it easy to use SVG icons from the following collections (more may be added in the future):

Icon Set License Variants
Bootstrap MIT License -
Feather MIT License Deprecated (use Lucide)
Font Awesome CC BY 4.0 License Regular, Solid
Heroicons MIT License Solid, Outline, Mini Solid
Lipis Flag Icons MIT License -
Lucide ISC License -
Octicons MIT License -
Simple Icons CC0 License -

Gallery

Gallery

*not all icons included in gallery.

Usage

Use the gallery to find icons you like, and add them as feature flags.

# If still using yew 0.19, use yew_icons 0.6.1

[dependencies]
yew_icons = {version = "0.7", features = ["LucideArrowLeftCircle", "LucideArrowRightCircle", "LucideArrowUpCircle"]}

Then, add an <Icon> component with the corresponding icon id, optionally specifying a width, height, and/or onclick callback.

use yew::prelude::*;
use yew_icons::{Icon, IconId};

html!{
    <>
        <Icon icon_id={IconId::LucideArrowLeftCircle}/>
        <Icon icon_id={IconId::LucideArrowUpCircle} width={"2em".to_owned()} height={"2em".to_owned()}/>
        <Icon icon_id={IconId::LucideArrowRightCircle} onclick={Callback::from(|_: MouseEvent| {})}/>
    </>
}

example image

Note: The icons will inherit their parent's CSS color.

Feature Flags

Each icon collection must be included with the corresponding feature flag, such as lucide or font_awesome_solid.

To save binary size, individual icons can also be included by feature flag, such as LucideZoomIn or FontAwesomeSolidAtom.

By default, no collections or icons are included. Be warned that including too many icons may result in a .wasm binary that some WebAssembly engines refuse to load, especially in debug mode (see rustwasm/wasm-pack#981).

License

Code is licensed under either of

at your option.

Icons are licensed by their respective creators (see above). An license summary is emitted to the DOM for each icon:

<svg data-license="...original license..."></svg>

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.