encre-css-icons

一个插件，提供一组类，用于从基于 Iconify 的 @unocss/preset-icons NodeJS 包的图标。

功能

• 大量的图标集（您可以使用 Icônes 在它们之间搜索）
• 纯 CSS 图标
• 图标跟随文本大小
• 图标跟随文本颜色
• 支持彩色和单色图标
• 在不使用 WebAssembly 的情况下，客户端不会发出任何请求
• 支持 WebAssembly（SVG 图标将直接在客户端获取）

入门指南

要将 encre-css-icons 与 encre-css 集成，请在您的 Cargo.toml 中添加它

[dependencies]
encre-css-icons = "0.1.4"

然后，使用一个可变引用到 Config 结构和一些参数调用 register 函数（所有参数都是可选的，您可以使用 None 使用默认值）

use encre_css::Config;

let mut config = Config::from_file("encre-css.toml")?;
// Or let mut config = Config::default();

encre_css_icons::register(&mut config);

// The convention is <prefix><collection>-<icon>
let _css = encre_css::generate(
    [r#"<h1 class="text-xl text-gray-600">Hello <span class="subway-world-1"></span>!</h1><div class="mdi-alarm block"></div><span class="fa-solid-home"></span><span class="openmoji-automobile hover:openmoji-autonomous-car"></span>"#],
    &config,
);
// Do something with the CSS

配置

此插件有一些配置选项，要设置它们，只需在配置中添加一个额外的字段 icons，并包含您想要更改的字段。如果您使用 Rust 进行配置，则必须在注册插件之前添加额外的配置。例如在 TOML

[extra.icons]
prefix = "i-"
custom-cdn = "https://cdn.skypack.dev"
scale = 1.2

或者在 Rust

use encre_css::{Config, toml};

let mut config = Config::default();
// Or let mut config = Config::from_file("encre-css.toml")?;

config.extra.add("icons", toml! {
    prefix = "i-"
    custom-cdn = "https://cdn.skypack.dev"
    scale = 1.2
});

// Then register the plugin
encre_css_icons::register(&mut config);

配置字段

• prefix（默认值：""）：添加到所有图标中的静态前缀
• custom-cdn（默认值：https://esm.sh）：用于获取图标 SVG 定义所使用的 CDN（见下文部分）
• scale（默认值：1.0）：用于更改图标大小的图标缩放比例

网络请求和缓存

请注意，为了获取图标SVG定义，此crate将向（当然可以配置）第三方CDN（默认CDN为https://esm.sh）发送请求，并将它们缓存在系统配置的缓存目录中（在GNU/Linux上为$XDG_CACHE_HOME或$HOME/.cache，在Windows上为{FOLDERID_LocalAppData}，在macOS上为$HOME/Library/Caches），在名为encre-css-icons-cache的目录中。

各种技巧和窍门

如果搜索集合文件花费时间过长（即使它们也缓存在内存中），建议在开发阶段就优化encre-css-icons crate，通过在您的Cargo.toml文件中添加以下内容

[profile.dev.package.encre-css-icons]
opt-level = 3

默认情况下，每个图标都应用了display: inline-block; CSS属性（甚至应用于div元素），否则当用于span元素时它们将没有尺寸。如果您需要将它们转换为块元素，可以在每个图标上使用block实用类，例如：<div class="fa-pencil block"></div>。

许可证

代码本身遵循MIT许可证。图标的集合遵循各种许可证，有关图标集合及其许可证的列表，请参阅collections.md。