13 unstable releases (3 breaking)
0.4.2 | Oct 21, 2020 |
---|---|
0.4.1 | Oct 20, 2020 |
0.3.2 | Jun 15, 2020 |
0.2.4 | Jun 13, 2020 |
0.1.1 | Jun 12, 2020 |
#276 in WebAssembly
26 downloads per month
62KB
134 lines
Icons Collections for Seed
Seed is an awesome framework to develop single page applications.
Seed Icons
provides build.rs
to generate icons to use with Seed.
It does not provide you with icons themselves (you stil have to reference
CSS / JS files from your index.html), but it gives you a module for each icon and it can help you with downloading resources.
Use Font-Awesome collection
Add to [dependencies]
In your Cargo.toml:
seed-icons = "0.4.0"
Import icon
For example regular check-circle could be imported next way:
use seed_icons::fa::regular::check_circle;
Render icon
There are three methods in icon module: i
, i_c
, i_s
and i_sc
i
- just renders iconi_c
- renders icon with a list of custom classesi_s
- renders icon with stylei_sc
- renders icon with style and classes
For example call i_s
function could be used like that:
use seed::{prelude::*, *};
use seed_icons::fa::regular::check_circle;
use seed_style::*;
fn green_check<T>() -> Node<T> {
check_circle::i_s(s().color(
CssColor::StringValue("green".to_string())
))
}
Or i_c
with custom CSS:
check_circle::i_c(vec!["green-icon"])
In this case you'd need also to provide CSS somewhere:
.green-icon {
color: green;
}
Add resources
You might want to download resources with icons by yourself, or
you can use seed-icons-gen
crate for that.
Add build dependency
In [build-dependencies]
add following:
seed-icons-gen = "0.3.0"
Add build.rs
If you already have build.rs
, you just need to modify it
to do the same as the following one:
fn main() {
seed_icons_gen::get_fa_resources("static");
}
When your crate would be built, that would download font-awesome
folder inside of static
folder.
You might want to add .gitignore
file in static folder:
font-awesome
, because you'd probably will not want to keep all those resources in your VCS.
Link stylesheets
If you've downloaded resources as explained before, then
you can link them in index.html
like that:
<link href="static/font-awesome/css/all.css" rel="stylesheet">
Use Material Icons
Add to [dependencies]
In your Cargo.toml:
[dependencies.seed-icons]
version = "0.4.0"
features = [
"material_icons"
]
Note that material icons is comes as an additional feature, by default only Font Awesome collection is included, which you can opt-out.
Import icon
For example regular check_circle could be imported next way:
use seed_icons::mi::regular::check_circle;
Render icon
Same as Render icon above
Link stylesheets
With Material Icons it's easier to link stylesheets directly from Google Fonts like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
If you want to bundle it in your build, you'd have to do it manually.
Alternative way to use get_mi_resources
from seed-icons-gen
in your build.rs
, however that approach limits you to only
regular
icons and some of the icons won't not be rendered properly.
SEED_ICONS_FILTER_NAMES
To optimize build time, seed-icons
build supports environment variable SEED_ICONS_FILTER_NAMES
.
It should be semicolon-separated list of icons names, which you want
to limit build to. While building the crate, seed-icons
would
check that variable and would only include those icons, which names
are in that list.
Names are not always match name of module in the icons.rs
, you might
want to visit Seed Icons Browser
to see the exact name of the icon you're interested in.
Here's example for bash
:
export SEED_ICONS_FILTER_NAMES='check_circle;check-circle;file-times;check_box_outline_blank'
If you add such line in ~/.bashrc
, for example, then all the build run
from bash
would use only limited set of icons.
Note that filter is cross-collection, therefore you cannot specify
from which collection the icon name is. If in the features you've
selected more than one collection and there's an icon with same name
in both of them, specifying that name in the filter variable, would
be interpreted as if you want to have both icons in the produced
icons.rs
. Filtering up to icon from specific collection is not
available, as this feature is only intended to be an optimization.
Roadmap
- variants support in registry
- add feather-icons collection https://github.com/feathericons/feather
- fix
get_mi_resources
to get all available icons, not only regular
Dependencies
~11–17MB
~302K SLoC