README

将来自 Iconify-Framework 的图标作为 SVG 插入到 fusion 模板中

用法

前往 https://icon-sets.iconify.design 查找图标
复制图标名称，包括集合名称，例如 'fa-brands:neos'
使用 fusion 中的通用组件

  icon = NeosLoves.Iconify:Icon {
    name="fa-brands:neos"
  }

和 afx 内

  <NeosLoves.Iconify:Icon name="fa-brands:neos" />

或创建您自定义的可重复使用图标组件

prototype(Neos.Neos:Icon) < prototype(NeosLoves.Iconify:Icon) {
  name="fa-brands:neos"
  color="#00adee"
}

原型属性

必填

name : 包含集合名称的图标名称，例如 'fa-brands:neos'

可选

如在此处描述 https://github.com/iconify/json-tools.php?tab=readme-ov-file#getting-svg-icon

inline : 如果为 true 或 "true" 或 "1"（字符串或布尔值），则代码将包含 vertical-align 样式，使其行为类似于符号。请参阅 inline vs block 文章。
width、height : 图标的尺寸。如果仅设置一个属性，则另一个属性将使用图标的宽高比设置。值可以是字符串（例如 "1em"，"24px" 或数字）。如果值为 "auto"，则使用图标的原始尺寸。如果未设置宽度和高度，则高度默认为 "1em"。
hFlip、vFlip : 如果为 true 或 "true" 或 "1"（字符串或布尔值），则图标将在水平和/或垂直方向上翻转。
flip : "hFlip" 和 "vFlip" 的替代方案，字符串。值可以是 "horizontal"、"vertical" 或 "horizontal,vertical"。
rotate : 旋转。值可以是度 "90deg"（仅提供 90、180 和 270 度旋转），百分比 "25%"（25%、50% 和 75% 是 90deg、180deg 和 270deg 的别名）或数字 1-3（1 - 90deg，2 - 180deg，3 - 270deg）。
align : 对齐。如果您设置了自定义宽度和高度，这将很有用。与其他图像不同，SVG 在缩放时保留纵横比（除非另有说明）。值是逗号或空格分隔的字符串，可能的字符串（例如： "left,top,crop"）
- left、right、center : 水平对齐
- top、middle、bottom : 垂直对齐
- crop : 裁剪超出边界之外的图像部分
- meet : 缩放图标以适应整个图标（与裁剪相反）
color : 用以替换 currentColor 的自定义颜色字符串。当使用图标作为背景图像时很有用，因为背景图像不能使用 currentColor。
box : 如果为 true 或 "true" 或 "1"（字符串或布尔值），则图标将包含与视图框匹配的额外矩形。这对于将图标导出到编辑器很有用，因为编辑器通常忽略视图框。

neosloves / iconify

维护者

详细信息

README

用法

原型属性

必填

可选