README

SVG 图标的一个 Twig 辅助工具

需求

此模块需要 Craft CMS 3.0.0-RC1 或更高版本。

安装

要安装该模块，请按照以下说明操作。

1. 打开您的终端并转到您的 Craft 项目

    cd /path/to/project
   

2. 然后告诉 Composer 加载插件

    composer require gentsagency/craft-inline-icons
   

3. 将 config/app.php 文件的内容添加到您的 config/app.php 文件中（如果不存在，则只需将其复制到那里）。这确保了您的模块将在每次请求中加载。文件可能看起来像这样

    return [
        'modules' => [
            'inline-icons' => [
                'class' => \gentsagency\inlineicons\InlineIcons::class,
            ],
        ],
        'bootstrap' => ['inline-icons'],
    ];
   

概览

该模块旨在与 @gentsagency/gulp-registry 一起使用；更具体地说，是与 icons task 一起使用。

它提供了一个简单的 {{ icon('facebook') }} Twig 函数来在 Craft 模板中渲染图标。

用法

以下示例假设所有前端资源都是通过 @gentsagency/gulp-registry 在 Craft 的 @webroot 路径内的某个路径中构建的。

<ul class="socials">
    <li>
        <a href="https://facebook.com/gentsagency">
            {{ icon('facebook') }}
        </a>
    </li>
    <li>
        <a href="https://instagram.com/gentsagency">
            {{
                icon(
                    'instagram',
                    {
                        class: 'inline-icon',
                        inline: true,
                        alt: 'Follow us on Instagram'
                    }
                )
            }}
        </a>
    </li>
</ul>

可用选项

您可以将这些选项传递给 Twig 函数。

• class (默认: 'icon')：应在 SVG 元素上设置哪个类
• inline (默认: false)：当设置为 true 时，SVG 将由 PHP 解析并嵌入到代码中
• alt (默认: 图标名称)：使用此选项覆盖屏幕阅读器读取的文本；设置为 false 以从屏幕阅读器中隐藏图标
• path (默认: '/assets/icons/icons.svg')：SVG 图标精灵图所在的位置，将在 @webroot 前面加上

注意事项

当使用 inline: false（默认值）时，除非您包含 svg4everybody polyfill，否则图标在 Internet Explorer 中将不会显示。

内联图标将在所有地方工作并为您提供更多样式选项。请注意，在 PHP 中解析 SVG 可能会影响服务器性能。请谨慎使用并注意！