README

TYPO3 Fluid 的 SVG 相关视图助手。

安装

通过 composer

composer req c1/c1-svg-viewhelpers

配置

包含静态 TypoScript 设置和常量
创建符号文件和 CSS（或 SCSS 或 LESS）类，详见下文
包含生成的 S(CSS) 或 LESS 文件
在 TypoScript 常量和/或设置中配置预置，例如将 plugin.tx_c1svgviewhelpers.settings.svg.symbol.presets.default 设置为指向生成的符号文件，如果需要，则添加更多预置键。为了方便，您应始终保留默认键，这允许您在不提供 symbolFile 参数的情况下使用 svgvh:symbol 视图助手。

为图标添加基本的 CSS 以正确显示。例如，如果您的图标以 .icon-default 前缀

 .icon-default {
     display: inline-block;
     >svg {
         width: 100%;
         height: 100%;
     }
 }

视图助手

svgvh:symbol

从 SVG 符号文件渲染图标。图标被包裹在一个 span 标签中，作为 SVG，并带有 xlink:href 属性，该属性引用一个外部的 SVG 符号文件。

使用 SVG 符号文件有一些优点，例如

符号文件可以被浏览器缓存
一个符号文件中所有图标只需一个 HTTP 请求
图标可以使用 CSS 进行样式化，详见下文（但使用 JavaScript 操作 SVG 是不可能的）

以下提供了更多关于 SVG 符号文件的信息以及如何生成它们。

用法

<svgvh:symbol identifier='icon-id' />

将输出类似以下内容

<span class="icon-default icon-default-icon-id icon-default-icon-id-dims">
    <svg role="graphics-symbol">
        <use xlink:href="/path/to/sprite-default.svg?cb=5db10127a446fff1f0d0240086487da1#icon-id"></use>
    </svg>
</span>

参数

此外，所有通用标签属性都受支持

class, dir, id, lang, style, title, accesskey, tabindex 和 onclick

创建 SVG 符号文件和 SCSS

有许多创建所需符号文件的方法，并且有 webpack、gulp、grunt 等插件的插件。

一个简单的解决方案是安装 npm 软件包 svg-sprite，我们可以使用它从一组 SVG 图标创建符号文件，并且还生成了一个包含图标尺寸的 SCSS 文件。

为 svg-sprite 创建 svg-sprite.config.json

{
  "shape": {
    "id": {
      "separator": ""
    }
  },
  "mode": {
    "symbol": {
      "dest": "target_path",
      "sprite": "sprite-default.svg",
      "prefix": ".icon-default-%s",
      "render": {
        "scss": {
          "dest": "target_path/_icon-default.scss"
        }
      }
    }
  }
}

然后运行 svg-sprite，同时提供您的 svg 图标路径

svg-sprite --config svg-sprite.config.json path/to/*.svg

如果成功，这将生成

target_path/_icon-default.scss - 包含图标默认尺寸的文件
target_path/sprite-default.svg - 包含所有图标的符号文件

注意

为了能够使用 CSS 样式化图标，您需要准备单个 SVG 文件

假设您想要能够样式化图标的描边或填充颜色，将它的颜色值替换为 'currentValue' 以使其使用父颜色。

见 https://stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document

变更日志

CHANGELOG.md

c1 / c1-svg-viewhelpers

维护者

详细信息

README

安装

配置

视图助手

svgvh:symbol

用法

参数

创建 SVG 符号文件和 SCSS

注意

变更日志