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 icon
• i_c - renders icon with a list of custom classes
• i_s - renders icon with style
• i_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