README

Neos 的 Svg 图标

此包根据 svg 文件渲染图标。渲染是通过内联或通过将集合中的所有 svg 合并成一个请求的 svg sprite 来完成的。

注意：此包使用外部 svg 引用，这些引用在某些较旧浏览器中不受支持。请检查此情况，并在需要时使用类似此 https://github.com/Keyamoon/svgxuse 的 polyfills。

作者与赞助商

• Wilhelm Behncke - behncke@sitegeist.de
• Martin Ficzel - ficzel@sitegeist.de

此包的开发和公开发布得到了我们雇主 https://www.sitegeist.de 的慷慨赞助。

配置

该包管理通过 Neos 设置定义的图标集合。可以从 path 配置集合，或者通过分别引用每个 item。

Sitegeist:
  Stampede:
    collections:

      #
      # Collections with a path will include all svg files in the given path
      # The icon name and the label are created from the filename
      #
      default: 
        label: "Default Collection"
        path: resource://Vendor.Site/Private/Icons

      #
      # Collections with explicit items allow to configure the path and label
      # for each icon. The key defines the icon name.
      #
      example:
        label: "Example Collection"
        items:
          foo:
            label: "Foo Item"
            path: resource://Vendor.Site/Private/Icons/foo.svg
          bar:
            label: "Bar Item"
            path: resource://Vendor.Site/Private/Icons/bar.svg

在生产环境中，为每个集合缓存生成的 svg sprite。在开发环境中，禁用 sprite 缓存。您可以通过设置来控制此操作。

Sitegeist:
  Stampede:
    enableCache: false

在生产环境中，svg sprite 表格将获得缓存控制头。您可以调整此值或通过设置禁用此功能。

Sitegeist:
  Stampede:
      publicCacheLifetime: 86400

包含自定义数据源，以允许编辑器在 Neos 检查器中选择图标

'Vendor.Site:NodeType': 
  properties:
    icon:
      type: string
      ui:
        inspector:
          editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            dataSourceIdentifier: 'sitegeist-stampede-icons'
            dataSourceAdditionalData:
              # Optionaly the icon collections offered to the editor
              # can be configured. By default all collections will be available   
              collections: ['example']

混入、预设、轮廓

该包包含混入 Sitegeist.Silhouette:Mixin.Icon 和属性预设/轮廓 stampede.icon。

Fusion

Sitegeist.Stampede:Icon 有以下选项：identifier：字符串（必需）由冒号分隔的 collection 和 icon 的组合标识符。将覆盖 collection 和 icon 值 collection：字符串（已弃用，将来使用 identifier）图标集合的名称 icon：字符串（已弃用，将来使用 identifier）图标的名称 class：字符串（可选）要添加到 svg 标签的类 style：字符串（可选）要添加到 svg 标签的样式。默认为 fill: currentColor; height: 1em; inline：布尔值，内联渲染 svg。默认为 false

通过 afx 使用原型 Sitegeist.Stampede:Icon 来渲染图标。

    renderer = afx`
        <Sitegeist.Stampede:Icon identifier="default:neos" />
    `

如果设置了 inline 选项，则 svg 内容将直接放入 html 中，而不是引用 spritesheet。如果单页面上使用的图标非常少，但图标很多，这可以提高性能。

    renderer = afx`
        <Sitegeist.Stampede:Icon identifier="default:neos" inline />
    `

注意：强烈建议为图标创建一个包装器原型，该原型设置所需的 class 并取消默认 style。

prototype(Vendor.Site:Component.SvgIcon) < prototype(Neos.Fusion:Component) {
    identifier = null

    renderer = Sitegeist.Stampede:Icon {
        identifier = ${props.identifier}
        class = "svgIcon"
        style = null
    }
}

此外，原型 Sitegeist.Stampede:Icon.Preview 以表格的形式渲染所有图标集合，以便在 Sitegeist.Monocle 风格指南中查看。

安装

Sitegeist.Stampede 通过 packagist 提供。只需运行 composer require sitegeist/stampede 即可安装。我们使用语义版本控制，因此每次重大更改都会增加主版本号。

贡献

我们很高兴接受贡献。请发送 pull requests 给我们。