Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed deferred SVGs that use mask, defs or use tags #202

Merged
merged 1 commit into from
Sep 30, 2022
Merged

Fixed deferred SVGs that use mask, defs or use tags #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Svg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ protected function deferContent(string $contents, $defer = false): string
return $contents;
}

$svgContent = strip_tags($contents, ['circle', 'ellipse', 'line', 'path', 'polygon', 'polyline', 'rect', 'g']);
$svgContent = strip_tags($contents, ['circle', 'ellipse', 'line', 'path', 'polygon', 'polyline', 'rect', 'g', 'mask', 'defs', 'use']);
$hash = 'icon-'.(is_string($defer) ? $defer : md5($svgContent));
$contents = str_replace($svgContent, strtr('<use href=":href"></use>', [':href' => '#'.$hash]), $contents);
$contents .= <<<BLADE
Expand Down
72 changes: 72 additions & 0 deletions tests/SvgTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,78 @@ public function it_can_compile_to_defered_html_with_group_and_whitespace()
@endonce', $svgHtml);
}

/** @test */
public function it_can_compile_to_defered_html_with_mask_tag()
{
$svgPath = '
<mask id="test" fill="#fff">
<path d="M0 30c0 16.56 13.44 30 30 30 16.56 0 30-13.44 30-30C60 13.44 46.56 0 30 0 13.44 0 0 13.44 0 30Zm4.35 0C4.35 15.84 15.845 4.35 30 4.35c6.295 0 12.08 2.27 16.495 6.04l-29.87 29.93-6.165 6.17C6.625 42.075 4.35 36.3 4.35 30Zm45.26-16.555c3.77 4.475 6.04 10.26 6.04 16.49 0 14.22-11.49 25.715-25.65 25.715-6.3 0-12.08-2.275-16.49-6.04l5.905-5.91-.005-.005 30.2-30.25Z" />
</mask>';
$svg = new Svg('heroicon-o-arrow-right', '<svg>'.$svgPath.'</svg>', ['defer' => true]);

$svgHtml = $svg->toHtml();

$this->assertEquals('<svg defer="1"><use href="#icon-e993fd00a973c62bf85d410a1a01dfe9"></use></svg>
@once("icon-e993fd00a973c62bf85d410a1a01dfe9")
@push("bladeicons")
<g id="icon-e993fd00a973c62bf85d410a1a01dfe9">

<mask id="test" fill="#fff">
<path d="M0 30c0 16.56 13.44 30 30 30 16.56 0 30-13.44 30-30C60 13.44 46.56 0 30 0 13.44 0 0 13.44 0 30Zm4.35 0C4.35 15.84 15.845 4.35 30 4.35c6.295 0 12.08 2.27 16.495 6.04l-29.87 29.93-6.165 6.17C6.625 42.075 4.35 36.3 4.35 30Zm45.26-16.555c3.77 4.475 6.04 10.26 6.04 16.49 0 14.22-11.49 25.715-25.65 25.715-6.3 0-12.08-2.275-16.49-6.04l5.905-5.91-.005-.005 30.2-30.25Z" />
</mask>
</g>
@endpush
@endonce', $svgHtml);
}

/** @test */
public function it_can_compile_to_defered_html_with_defs_tag()
{
$svgPath = '
<defs>
<path d="M0 29.997495C0 46.567015 13.427975 60 30.002505 60 46.567015 60 60 46.567015 60 29.997495 60 13.432985 46.567015 0 30.002505 0 13.427975 0 0 13.432985 0 29.997495Z" id="fodmap-a"/>
<path d="M15.685498 3.670797C2.64507 10.886334-3.260408 26.270404 1.80359 40.303137c3.280262 9.091274 9.639234 15.2328 18.784665 18.459875.408143.141184.745743.226903 1.022877.236988h.100776c.665122-.025211.92714-.529442.891869-1.699256-.105815-3.101018.146125-6.222204-.095738-9.303052-.403104-5.0776 3.824453-8.718143 8.591162-8.460986 3.900035.206735 7.825264.095804 11.730338.005043 2.7008-.060508 4.252751-1.724468 4.167092-4.175028-.08566-2.279122-1.72831-3.711136-4.378722-3.731305-4.04616-.02017-8.09232 0-12.13848 0-1.360478 0-2.715916.010084-4.076394.025211-2.957778.030254-5.920595.060508-8.868296-.070592-5.376405-.226904-8.581085-5.985215-6.177575-10.760277 1.451176-2.899325 3.814376-4.255705 6.978745-4.301085 4.111665-.060508 8.228368-.050423 12.334994-.141185 3.174447-.070592 4.51477-1.482437 4.539963-4.659089.020155-3.232117-.04031-6.474318.025194-9.711477.025194-1.321084-.569385-1.81523-1.76862-1.905991C32.479834.040338 31.492228 0 30.5147 0c-5.189969 0-10.168308 1.09418-14.829202 3.670797Z" id="fodmap-c"/>
<path d="M24.539044 1.93889c-.005033 2.724387.005033 5.453746.0151 8.178134.0151 5.210143-3.110582 8.25768-8.44085 8.247736-3.840411-.009943-7.680822-.019886-11.5162.009943-2.81865.019886-4.660839 1.635627-4.595406 3.942408.0604 2.306781 1.726423 3.738576 4.535007 3.763434 4.107176.044743 8.214352.009943 12.321528.009943v-.034801h5.657433c1.952922.004971 3.905844.014915 5.863799.019886 4.721239.004972 8.179119 3.19171 8.158985 7.521896-.025166 4.330185-3.462913 7.482123-8.199252 7.511952-3.905843.019886-7.811687.014915-11.71753.059658-3.437747.039772-4.711173 1.332365-4.731306 4.757736-.020134 3.19171.130866 6.388391-.0604 9.57513-.115766 1.90906.649296 2.366438 2.370686 2.455925 14.13855.750699 27.230174-8.605684 30.80382-22.093393C48.905267 21.163721 41.03318 5.861411 26.809063.477265 26.02387.178975 25.510472 0 25.178274 0c-.583864 0-.634197.541895-.63923 1.93889Z" id="fodmap-e"/>
</defs>';
$svg = new Svg('heroicon-o-arrow-right', '<svg>'.$svgPath.'</svg>', ['defer' => true]);

$svgHtml = $svg->toHtml();

$this->assertEquals('<svg defer="1"><use href="#icon-50715b5a52a453df06f228c92c5882b1"></use></svg>
@once("icon-50715b5a52a453df06f228c92c5882b1")
@push("bladeicons")
<g id="icon-50715b5a52a453df06f228c92c5882b1">

<defs>
<path d="M0 29.997495C0 46.567015 13.427975 60 30.002505 60 46.567015 60 60 46.567015 60 29.997495 60 13.432985 46.567015 0 30.002505 0 13.427975 0 0 13.432985 0 29.997495Z" id="fodmap-a"/>
<path d="M15.685498 3.670797C2.64507 10.886334-3.260408 26.270404 1.80359 40.303137c3.280262 9.091274 9.639234 15.2328 18.784665 18.459875.408143.141184.745743.226903 1.022877.236988h.100776c.665122-.025211.92714-.529442.891869-1.699256-.105815-3.101018.146125-6.222204-.095738-9.303052-.403104-5.0776 3.824453-8.718143 8.591162-8.460986 3.900035.206735 7.825264.095804 11.730338.005043 2.7008-.060508 4.252751-1.724468 4.167092-4.175028-.08566-2.279122-1.72831-3.711136-4.378722-3.731305-4.04616-.02017-8.09232 0-12.13848 0-1.360478 0-2.715916.010084-4.076394.025211-2.957778.030254-5.920595.060508-8.868296-.070592-5.376405-.226904-8.581085-5.985215-6.177575-10.760277 1.451176-2.899325 3.814376-4.255705 6.978745-4.301085 4.111665-.060508 8.228368-.050423 12.334994-.141185 3.174447-.070592 4.51477-1.482437 4.539963-4.659089.020155-3.232117-.04031-6.474318.025194-9.711477.025194-1.321084-.569385-1.81523-1.76862-1.905991C32.479834.040338 31.492228 0 30.5147 0c-5.189969 0-10.168308 1.09418-14.829202 3.670797Z" id="fodmap-c"/>
<path d="M24.539044 1.93889c-.005033 2.724387.005033 5.453746.0151 8.178134.0151 5.210143-3.110582 8.25768-8.44085 8.247736-3.840411-.009943-7.680822-.019886-11.5162.009943-2.81865.019886-4.660839 1.635627-4.595406 3.942408.0604 2.306781 1.726423 3.738576 4.535007 3.763434 4.107176.044743 8.214352.009943 12.321528.009943v-.034801h5.657433c1.952922.004971 3.905844.014915 5.863799.019886 4.721239.004972 8.179119 3.19171 8.158985 7.521896-.025166 4.330185-3.462913 7.482123-8.199252 7.511952-3.905843.019886-7.811687.014915-11.71753.059658-3.437747.039772-4.711173 1.332365-4.731306 4.757736-.020134 3.19171.130866 6.388391-.0604 9.57513-.115766 1.90906.649296 2.366438 2.370686 2.455925 14.13855.750699 27.230174-8.605684 30.80382-22.093393C48.905267 21.163721 41.03318 5.861411 26.809063.477265 26.02387.178975 25.510472 0 25.178274 0c-.583864 0-.634197.541895-.63923 1.93889Z" id="fodmap-e"/>
</defs>
</g>
@endpush
@endonce', $svgHtml);
}

/** @test */
public function it_can_compile_to_defered_html_with_use_tag()
{
$svgPath = '
<use xlink:href="#fodmap-e"/>';
$svg = new Svg('heroicon-o-arrow-right', '<svg>'.$svgPath.'</svg>', ['defer' => true]);

$svgHtml = $svg->toHtml();

$this->assertEquals('<svg defer="1"><use href="#icon-7f8be00eb404e323e6b73eb94cf8a0d7"></use></svg>
@once("icon-7f8be00eb404e323e6b73eb94cf8a0d7")
@push("bladeicons")
<g id="icon-7f8be00eb404e323e6b73eb94cf8a0d7">

<use xlink:href="#fodmap-e"/>
</g>
@endpush
@endonce', $svgHtml);
}

/** @test */
public function it_can_compile_with_attributes()
{
Expand Down