Seed的图标集合

Seed 是一个用于开发单页应用的优秀框架。

Seed Icons 提供了 build.rs 以生成与Seed一起使用的图标。它并不提供图标本身（你仍然需要在index.html中引用CSS / JS文件），但它为每个图标提供一个模块，并可以帮助你下载资源。

使用 Font-Awesome 集合

添加到 [dependencies]

在你的 Cargo.toml 中

seed-icons = "0.4.0"

导入图标

例如，可以通过以下方式导入 常规的勾选圆圈

use seed_icons::fa::regular::check_circle;

渲染图标

图标模块中有三种方法：i、i_c、i_s 和 i_sc

• i - 仅渲染图标
• i_c - 使用自定义类列表渲染图标
• i_s - 使用样式渲染图标
• i_sc - 使用样式和类渲染图标

例如，调用 i_s 函数可以像这样使用

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())
    ))
}

或使用自定义CSS的 i_c

check_circle::i_c(vec!["green-icon"])

在这种情况下，你还需要在某个地方提供CSS

.green-icon {
    color: green;
}

添加资源

你可能想自己下载带有图标的资源，或者可以使用 seed-icons-gen crate 来完成。

添加构建依赖项

在 [build-dependencies] 中添加以下内容

seed-icons-gen = "0.3.0"

添加 build.rs

如果你已经有 build.rs，你只需要将其修改为以下内容即可

fn main() {
    seed_icons_gen::get_fa_resources("static");
}

当你的crate被构建时，会在 static 文件夹中下载 font-awesome 文件夹。

你可能在静态文件夹中添加 .gitignore 文件

font-awesome

，因为你可能不想将这些资源全部保留在VCS中。

链接样式表

如果您已经按照之前的说明下载了资源，那么您可以在 index.html 中像这样链接它们

    <link href="static/font-awesome/css/all.css" rel="stylesheet">

使用 Material 图标

添加到 [dependencies]

在你的 Cargo.toml 中

[dependencies.seed-icons]
version = "0.4.0"
features = [
  "material_icons"
]

请注意，material 图标作为一个附加功能提供，默认情况下仅包含 Font Awesome 集合，您可以取消选择。

导入图标

例如，常规 check_circle 可以以下方式导入

use seed_icons::mi::regular::check_circle;

渲染图标

与上方的 渲染图标 相同

链接样式表

使用 Material Icons，直接从 Google Fonts 链接样式表更容易，如下所示

    <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">

如果您想将其捆绑到您的构建中，您将必须手动操作。

另一种方法是在您的 build.rs 中使用来自 seed-icons-gen 的 get_mi_resources，然而这种方法限制您只能使用 regular 图标，并且某些图标可能无法正确渲染。

SEED_ICONS_FILTER_NAMES

为了优化构建时间，seed-icons 支持环境变量 SEED_ICONS_FILTER_NAMES。

它应该是一个分号分隔的图标名称列表，您希望将构建限制在这些图标上。在构建存根时，seed-icons 会检查该变量，并且只会包括那些名称在该列表中的图标。

名称不一定与 icons.rs 中的模块名称匹配，您可能想访问 Seed Icons Browser 来查看您感兴趣的图标的准确名称。

以下是一个 bash 的示例

export SEED_ICONS_FILTER_NAMES='check_circle;check-circle;file-times;check_box_outline_blank'

如果您在 ~/.bashrc 中添加这样的行，例如，那么所有从 bash 运行的构建都将仅使用有限的图标集。

请注意，过滤器是跨集合的，因此您不能指定图标名称来自哪个集合。如果您选择了多个集合，并且两个集合中都有一个同名图标，则在过滤器变量中指定该名称将被解释为如果您想要在生成的 icons.rs 中同时拥有这两个图标。无法过滤到特定集合的图标，因为这个功能仅用于优化。

路线图

• 注册表中支持变体
• 添加 feather-icons 集合 https://github.com/feathericons/feather
• 修复 get_mi_resources 以获取所有可用的图标，而不仅仅是常规图标