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 | - |
| Extra | Case-by-case | - |
*not all icons included in gallery.
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
# If still using yew 0.20, use yew_icons 0.7.3
[dependencies]
yew_icons = {version = "0.8", 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| {})}/>
</>
}
Note: The icons will inherit their parent's CSS color.
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).
Code is licensed under either of
- Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
- MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)
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>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.
# 1. on first checkout, init submodules:
git submodule update --init --recursive
# 2. update a submodule to latest commit in remote branch:
git submodule update --remote bootstrap
# 3. generate the icons, writing the feature flags to a file:
cargo run --features="generator" > generated_feature_flags.txt
# 4. reformat the feature flags onto separate lines (choose your own adventure, e.g. vim macros)
# 5. copy the feature flags from generated_feature_flags.txt to the Cargo.tomlPR's ideally shouldn't include non-trivial amounts of generated file diffs. Merging and then generating is much easier to review than thousands of generated files.
# 1. uncomment the "testing" feature flag in Cargo.toml
# 2. for each icon set to test, run:
cargo test test --features "enum-iterator testing [icon collection to test]"
# (the test name is "test", which we specify to skip the doc tests)
# icon collection options are: bootstrap feather font_awesome_regular font_awesome_solid heroicons_mini_solid heroicons_outline heroicons_solid lipis_flag_icons_1_x_1 lipis_flag_icons_4_x_3 lucide octicons simple_icons
# if testing all icon sets at once, the prokio-runtime-worker may overflow its stack
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent