README

使用 SVG sprites 优化 FontAwesome。

FontAwesome 提供了数千个图标，但您可能只在自己的网站上使用了几十个。您不需要将所有这些图标都作为网络字体加载，而可以使用 SVG sprites。

这个库是一个简单的助手，它

• 在您使用图标的地方注册这些图标，
• 在页面末尾导出经过精简的 SVG 符号集。

您可以查看一篇关于可能收益的 博客文章。

陷阱

警告：这是一个早期版本，并不适合每个网站！

如果以下情况之一发生，它可能工作得不好：

• 您动态加载包含图标的内容，
• 您使用缓存的方式不会触发优化器，
• 您希望图标在页面之间在浏览器中缓存，
• 如果您使用了很多图标，
• ...

安装

composer require avris/fontawesome-optimiser

实例化优化器，将其指向 FontAwesome SVG 文件，并可选地选择默认图标集

$fonts = new \Avris\FontawesomeOptimiser\Optimiser(
    __DIR__ . '/node_modules/@fortawesome/fontawesome-pro/sprites',
    'light'
);

如果您使用 Twig，注册一个扩展

$twig->addExtension(new \Avris\FontawesomeOptimiser\TwigExtension($optimiser));

如果您使用 Symfony，以下是注册优化器作为服务的方式

services:
    Avris\FontawesomeOptimiser\Optimiser:
        arguments:
            $spritesDir: '%kernel.project_dir%/node_modules/@fortawesome/fontawesome-pro/sprites'
            $defaultSet: 'light'

    Avris\FontawesomeOptimiser\TwigExtension: ~
    

另外，包含此 CSS 以使 SVGs 以网络字体显示

.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.125em;
    fill: currentColor;
}

用法

您想显示图标的地方，使用

$icons->icon('user');           // far fa-user
$icons->icon('brands gitlab');  // fab fa-gitlab
$icons->icon('fab gitlab');
$icons->icon('gitlab', 'brands');

这将保存此图标为已使用，并渲染带有对符号引用的标签，例如

<svg class="icon"><use xlink:href="#regular-user"></use></svg>

在关闭 </body> 标签之前使用

$icons->iconSprites();

这将渲染已使用字体的实际定义

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="regular-user">...

在 Twig 中，您可以使用函数

{{ icon('user') }}

...

{{ iconSprites()}} 

版权

• 作者： Avris
• 许可证： MIT