README

关于

使用此扩展，您可以通过 Contao 插入标签轻松地将图标精灵文件中的 SVG 图标添加到您的网站。
它还允许从文件系统中的 SVG 文件输出内联 SVG。

安装

使用 composer require slashworks/contao-simple-svg-icons 安装。
更新数据库后，在主题设置中选择 SVG 图标精灵文件。使用新的字段 图标文件 选择 SVG 图标精灵文件。您可使用的图标都来自此文件。
为了方便开始，下载 example-sprite.svg 并将其放置在 contao 安装文件的文件夹中。

SVG 图标精灵文件是多个 SVG 图标的集合，定义在 <symbol> 中。
例如，菜单图标看起来像这样

<symbol viewBox="0 0 24 24" id="ic_menu_24px">
    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</symbol>

使用此图标的重要部分是符号的 id。

有关创建自己的 SVG 图标精灵文件的更多信息，您可以查看 创建和使用 SVG Sprites 指南。

使用方法

SVG Sprite

当您想从 SVG 精灵输出符号时，基本格式为
{{svg::ICON_ID}}.
渲染输出

<svg class="svg-icon ICON_ID" viewBox="x y w h">
    <use xlink:href="…">…</use>
</svg>

内联 SVG

您也可以内联输出 SVG 文件。
您必须提供文件系统中的 SVG 文件的 UUID 而不是符号的 id
{{svg::a8824458-a08e-11e9-9d96-81cb79fa7a74}}
渲染输出

<svg class="svg-inline" viewBox="x y w h">
    <path></path>
    …
</svg>

参数

您可以将其他参数传递到插入标签

class: {{svg::ICON_ID|UUID?class=my-css-class}}
这将把给定的字符串作为 CSS 类添加到 SVG 元素中，并渲染为

<svg class="svg-inline ICON_ID my-css-class">…</svg>

id: {{svg::ICON_ID|UUID?id=my-css-id}}
这将为 SVG 元素添加给定的字符串作为 CSS ID，并渲染为

<svg class="svg-inline ICON_ID" id="my-css-id">…</svg>

width: {{svg::UUID?width=120}}
宽度参数仅适用于内联 SVG。
如果没有设置高度属性，则宽度属性会尝试从已存在的宽度/高度属性或 viewBox 属性获取宽高比，并相应地设置高度。您始终可以使用 CSS 覆盖它。

height: {{svg::UUID?height=80}}
高度参数仅适用于内联 SVG。
如果没有设置宽度属性，则高度属性会尝试从已存在的宽度/高度属性或 viewBox 属性获取宽高比，并相应地设置宽度。您始终可以使用 CSS 覆盖它。

您可以使用任意组合的多个参数
{{svg::UUID?width=120}}
{{svg::UUID?height=80&class=custom-icon}}
{{svg::ICON_ID|UUID?id=my-icon-id&class=custom-icon-class}}

技巧

SVG 图标的主要用途是与文本结合使用，例如菜单汉堡、联系信息、滑块 UI 元素等。您可以使用以下定义作为 svg 图标的 CSS 样式的起点

.svg-inline {
    fill: currentColor;
    height: auto;
    width: 1em;
}

这将根据父元素的字体大小缩放图标。
此外，垂直定位需要一些进一步的调整。您可以使用 vertical-align、具有一些 top 或 bottom 值的 relative 定位，或将父元素设置为 flex-容器并使用 align-items 正确定位包含的图标。

示例：汉堡菜单

让我们通过一个汉堡菜单示例来操作。
我们想使用示例精灵中的 icon_menu_24px，因此我们的 inserttag 看起来像这样

{{svg::icon_menu_24px}}

带有 inserttag 的 HTML 代码

<button>
    Menu {{svg::icon_menu_24px}}
</button>

设置按钮的字体大小和 svg 的宽度后，它会看起来像这样

button {
    font-size: 1em;
}

button .svg-inline {
    width: 1.5em;
}

最后我们调整图标的垂直对齐

button {
    align-items: center;
    display: inline-flex;
}

button svg {
    margin-left: 5px;
}

当使用提示部分的推荐 CSS 时，SVG 图标将从按钮继承 color

button:hover {
    color: red;
}

当然，您可以定义 SVG 图标的不同颜色

button:hover svg {
    color: green;
}

图标选择的后端小部件

该扩展包含一个自定义后端小部件，使得图标选择简单直观。
要使用该小部件，请参考以下代码。

示例 dca 文件，例如 tl_content

<?php

use \Slashworks\ContaoSimpleSvgIconsBundle\DataContainer\General;

$GLOBALS['TL_DCA']['tl_content']['fields']['myIcon'] = array
(
    'label'            => &$GLOBALS['TL_LANG']['tl_content']['icon'],
    'inputType'        => 'svgiconselect', // This field uses the custom backend widget
    'options_callback' => array(General::class, 'getIcons'), // Get all svg icons selected in the themes.
    'reference'        => &$GLOBALS['TL_LANG']['MSC']['icons'], // Use the symbols ID as key for a translation.
    'eval'             => array('includeBlankOption' => true),
    'sql'              => "varchar(64) NOT NULL default ''",
);

示例语言文件

<?php

$GLOBALS['TL_LANG']['MSC']['icons']['icon-arrow-right'] = 'Pfeil nach rechts';
$GLOBALS['TL_LANG']['MSC']['icons']['icon-arrow-left'] = 'Pfeil nach links';

许可协议

此 contao 模块根据 LGPLv3 许可协议授权。

致谢

示例精灵中使用的图标来自 Google Material Icons。