README

Symfony Bundle用于读取SVG文件并以HTML标记输出。

什么是SVGIcon包？

SVGIcon是一个symfony包，用于读取SVG文件（如material design图标、bootstrap图标等），可以通过twig函数或使用SVGIcon作为服务来输出内联HTML。

特性

SVGIcon支持以下功能

提供twig函数，方便在模板中输出内联HTML。
读取SVG图标文件（来自bootstrap-icons、material design图标等）。
覆盖样式和标签（宽度、高度等），如果SVG图标中未找到，则提供有用的默认值。
支持webpack encore，用于在公共构建位置使用清单文件管理图标。

要求

SVGIcon PHP类需要以下要求

PHP 7.4或更高版本
meyfa/php-svg

安装

确保全局已安装Composer，如Composer文档中的安装章节所述。

使用Symfony Flex的应用程序

打开命令控制台，进入您的项目目录，并执行以下命令

composer require robwdwd/svg-icon-bundle

未使用Symfony Flex的应用程序

步骤1：下载包

打开命令控制台，进入您的项目目录，并执行以下命令以下载此包的最新稳定版本

composer require robwdwd/svg-icon-bundle

步骤2：启用包

然后，通过将其添加到项目中config/bundles.php文件中注册的包列表中来启用包

// config/bundles.php

return [
    // ...
    Robwdwd\SVGIconBundle\SVGIconBundleBundle::class => ['all' => true],
];

配置

配置在config/packages/robwdwd_svg_icon.yaml中进行，尽管这可以是任何文件名。

以下是一个示例配置，使用webpack encore管理material design图标和正常文件路径管理bootstrap图标。

svg_icon:
    icons:
        mdi:
            base_dir: '%kernel.project_dir%/public'
            icon_dir: 'build/icons/mdi'
            width: 24
            height: 24
            webpack: true
        bsi:
            base_dir: '%kernel.project_dir%'
            icon_dir: 'node_modules/bootstrap-icons/icons'
            webpack: false

对于由webpack encore管理的图标，每个图标的base_dir应该是您symfony项目的公共目录，而icon_dir应该是webpack encore复制图标文件的构建目录和子目录。使用icon_dir和图标文件名在webpack manifest.json中查找图标。

对于不由webpack Encore管理的图标（例如直接从node_modules目录），将base_dir设置为%kernel.project_dir%，将icon_dir设置为包括node_modules的位置。但是，对于不由webpack encore管理的图标包，简单地将icon_dir和base_dir连接起来。

图标安装

图标应按照正常的图标安装过程进行安装。例如，安装bootstrap图标和material design图标。

yarn add bootstrap-icons --dev
yarn add @mdi/svg --dev

Webpack Encore

使用webpack encore通过copyFiles将SVG图标复制到您的构建目录。以下示例将material design图标复制到您的公共构建目录下的icons/mdi，将bootstrap图标复制到icons/bsi。如果已启用版本控制，将使用版本控制。

在配置文件中将webpack设置为true时，该包将根据默认webpack清单查找图标的位置来加载图标文件。

.copyFiles({
        from: './node_modules/@mdi/svg/svg',
        to: 'icons/mdi/[path][name].[hash:8].[ext]',
        pattern: /\.svg$/
    })

.copyFiles({
        from: './node_modules/bootstrap-icons/icons',
        to: 'icons/bsi/[path][name].[hash:8].[ext]',
        pattern: /\.svg$/
    })

使用方法和示例

该包提供了一个twig函数和一个服务来加载和获取SVG图标的HTML。

默认属性和样式

默认情况下，该组件将宽度设置为16，高度设置为16，将 viewBox 设置为 0 0 16 16，并将填充颜色设置为当前颜色。如果 SVG 图标没有这些属性，或者您在 twig 调用中没有覆盖它们，这些属性将被使用。

在 twig 调用中设置的属性将始终覆盖 SVG 文件和默认值的属性/样式。SVG 文件始终覆盖默认值。

宽度和高度是图标包的可选配置，将覆盖组件默认值、图标宽度和高度属性，但不会覆盖模板调用中的任何宽度和高度。

组件采取以下优先级顺序：默认值→SVG 文件→尺寸→Twig 调用。

Twig

SVGIcon 组件提供了一个 twig 函数，可以将 SVG 图标 HTML 标记内嵌到模板中。该函数接受图标包名称和图标名称（不带 .svg 扩展名的文件名）。它允许应用可选的属性和样式到图标上。

    svg_icon('<icon package>', '<icon name>', {[attributes]}, {[styles]})

简单用法

要将 Material design 铅笔图标嵌入到您的 HTML 中，请使用以下方法。如果图标没有包含这些属性，将使用图标及其默认值。

    {{ svg_icon('mdi', 'pencil') }}

高级用法

要覆盖宽度和高度属性。

    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18}) }}

设置宽度和高度以及类，并将填充颜色设置为红色。

    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18, 'class':'svgicon'}, {'fill':'red'}) }}

您还可以将填充颜色作为属性设置，这将被自动转换为样式。任何应该作为样式的属性将被转换。

    {{ svg_icon('mdi', 'eye-outline', {'width': 18, 'height': 18, 'class':'svgicon', 'fill':'red'}) }}

作为一个服务

您可以在控制器或服务中使用 SVGIcon 服务来手动生成 SVG 图标。

use Robwdwd\SVGIconBundle\SVGIcon;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function homepage(SVGIcon $svgIcon) {

        // Load the SVG
        $svgIcon->loadSVG('mdi', 'magnify', ['class' => 'svgicon'], ['fill' => 'currentColor']);

        // Get HTML for SVG
        $searchIcon = $svgIcon->toXMLString();

        // HTML with XML header
        dump($svgIcon->toXMLString(true));

        return $this->render('index.html.twig', ['search_icon' => $searchIcon]);
    }
}

robwdwd / svg-icon-bundle

维护者

详情