Icons

从最流行的图标库导入图标

配置参数

folder string
Default: 
"/icons"
catalogs object[]
Default: 
[
  {
    id: "bootstrap",
    src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/{name}.svg"
  },
  {
    id: "heroicons",
    src: "https://cdn.jsdelivr.net/npm/heroicons@2.2.0/{variant}/{name}.svg",
    variants: [
      { id: "outline", path: "24/outline" },
      { id: "solid", path: "24/solid" },
      { id: "minimal", path: "20/solid" },
      { id: "micro", path: "16/solid" }
    ]
  },
  {
    id: "lucide",
    src: "https://cdn.jsdelivr.net/npm/lucide-static@0.471.0/icons/{name}.svg"
  },
  {
    id: "material-100",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-100@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-200",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-200@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-300",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-300@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-400",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-400@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-500",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-600",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-600@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material-700",
    src: "https://cdn.jsdelivr.net/npm/@material-symbols/svg-700@0.27.2/{variant}/{name}.svg",
    variants: [ "outlined", "rounded", "sharp" ]
  },
  {
    id: "material",
    src: "https://cdn.jsdelivr.net/npm/@material-design-icons/svg@0.14.13/{variant}/{name}.svg",
    variants: [ "filled", "outlined", "round", "sharp", "two-tone" ]
  },
  {
    id: "mingcute",
    src: "https://cdn.jsdelivr.net/gh/Richard9394/MingCute@2.95/svg/{name}.svg"
  },
  {
    id: "phosphor",
    src: "https://cdn.jsdelivr.net/npm/@phosphor-icons/core@2.1.1/assets/{variant}/{name}.svg",
    name: [Function: name],
    variants: [ "regular", "bold", "duotone", "fill", "light", "thin" ]
  },
  {
    id: "remix",
    src: "https://cdn.jsdelivr.net/npm/remixicon@4.6.0/icons/{name}.svg",
    name: [Function: capitalize]
  },
  {
    id: "simpleicons",
    src: "https://cdn.jsdelivr.net/npm/simple-icons@14.1.0/icons/{name}.svg"
  },
  {
    id: "tabler",
    src: "https://cdn.jsdelivr.net/npm/@tabler/icons@3.28.1/icons/{variant}/{name}.svg",
    variants: [ "filled", "outline" ]
  },
  {
    id: "myna",
    src: "https://cdn.jsdelivr.net/npm/@mynaui/icons@0.3.3/{variant}/{name}.svg",
    variants: [
      { id: "regular", path: "icons" },
      { id: "solid", path: "icons-solid" }
    ]
  },
  {
    id: "iconoir",
    src: "https://cdn.jsdelivr.net/npm/iconoir@7.10.1/icons/{variant}/{name}.svg",
    variants: [ "regular", "solid" ]
  },
  {
    id: "sargam",
    name: [Function: capitalize],
    src: "https://cdn.jsdelivr.net/npm/sargam-icons@1.4.8/Icons/{variant}/si_{name}.svg",
    variants: [
      { id: "duotone", path: "Duotone" },
      { id: "fill", path: "Fill" },
      { id: "line", path: "Line" }
    ]
  },
  {
    id: "boxicons",
    src: "https://cdn.jsdelivr.net/npm/boxicons@2.1.4/svg/{variant}-{name}.svg",
    variants: [
      { id: "regular", path: "regular/bx" },
      { id: "solid", path: "solid/bxs" },
      { id: "logos", path: "logos/bxl" }
    ]
  },
  {
    id: "ant",
    src: "https://cdn.jsdelivr.net/npm/@ant-design/icons-svg@4.4.2/inline-namespaced-svg/{variant}/{name}.svg",
    variants: [ "filled", "outlined", "twotone" ]
  },
  {
    id: "fluent",
    src: "https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.271/icons/{name}_{variant}.svg",
    variants: [
      { id: "outlined", path: "regular" },
      "filled",
      { id: "twotone", path: "color" }
    ]
  },
  {
    id: "octicons",
    src: "https://cdn.jsdelivr.net/npm/@primer/octicons@19.14.0/build/svg/{name}-{variant}.svg",
    variants: [ "24", "16", "12", "48", "96" ]
  },
  {
    id: "openmoji",
    src: "https://cdn.jsdelivr.net/npm/openmoji@15.1.0/{variant}/svg/{name}.svg",
    variants: [ "color", "black" ]
  }
]

描述

这个插件注册了 icon 过滤器，用于按需从最流行的图标库下载图标。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import icons from "lume/plugins/icons.ts";

const site = lume();

site.use(icons(/* Options */)); // 选项

export default site;

用法

icon 过滤器下载图标的 SVG 文件，并返回此文件的路径，以便你可以在模板中使用它。例如，要使用来自 Bootstrap 图标库的 fire 图标：

<img src="{{ "fire" |> icon("bootstrap") }}">

默认情况下，SVG 文件被下载到 /icons 文件夹，并为每个集合创建一个子文件夹。在前面的示例中，图标将保存到 /icons/bootstrap/fire.svg。可以使用 folder 选项配置不同的文件夹：

site.use(icons({
  folder: "/img/icons",
}));

变体 (Variants)

一些图标有不同的变体 (variations)。例如，Phosphor 每个图标有 6 种不同的变体。你可以使用 name:variation 语法指定变体：

<img src="{{ "acorn:duotone" |> icon("phosphor") }}">

图标文件将保存到 /icons/phosphor/acorn-duotone.svg (变体被附加到名称)。

或者，你可以在过滤器的第二个参数中设置变体：

<img src="{{ "acorn" |> icon("phosphor", "duotone") }}">

如果你想要更多地控制要使用的变体，并且不想将此决定委托给负责编辑内容的人，这将非常有用。

内联图标 (Inline icons)

要将图标内联到 HTML 中，你可以将此插件与 inline 插件 结合使用：

<img src="{{ "acorn" |> icon("phosphor") }}" inline>

可用库 (Available libraries)

这是插件开箱即用的所有可用库的列表：

库 (Library)ID(s)
Antant
Bootstrapbootstrap
Boxiconsboxicons
Fluentfluent
Heroiconsheroicons
Iconoiriconoir
Lucidelucide
Material Iconsmaterial
Material Symbolsmaterial-100, material-200, material-300, material-400, material-500, material-600, material-700
Mingcutemingcute
Mynamyna
Octiconsocticons
Openmojiopenmoji
Phosphorphosphor
Remix iconsremix
Sargamsargam
Simpleiconssimpleicons
Tablertabler

使用自定义库 (Use custom libraries)

catalogs 选项允许配置自定义图标目录 (catalogs)。每个目录 (catalog) 都是一个具有以下属性的对象：

id (必需)
目录 (catalog) ID，在过滤器中使用
src (必需)
用于从 CDN 下载 SVG 图标的 URL 模式。JsDelivr 是强烈推荐的，但你可以使用任何域名。该模式应包含 {name} 和 {variant} 占位符，这些占位符将被替换为名称和变体以构建最终 URL。
variants
如果目录 (catalog) 有不同的变体 (variants)，则必须在此数组中列出它们。变体 (variants) 可以是字符串或具有 id 和 path 属性的对象。数组的第一个元素被认为是默认变体 (default variant)。
name
如果图标文件的路径与图标名称不对应，你可以配置一个函数来返回最终路径。

示例 (Example)

site.use(icons({
  catalogs: [
    {
      id: "my-library",
      src: "https://my-cdn.com/icons/{name}-{variant}.svg",
      variants: [
        "filled",
        "outlined",
      ],
    },
  ],
}));

要使用这个库：

<img src="{{ iconName |> icon("my-library", "filled") }}">