Update changelog

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+## [X.X.X] - XXXX-XX-XX
+- Allow passing in a space-separated string to the `classes` option
+- Add new exceptions and messages to make debugging a little bit faster
+- Set `aria-hidden` attribute depending on whether a `title` has been set
+
+## [1.0.0] - 2023-06-27
+- First major version release

README.md

@@ -33,11 +33,12 @@ pcm_icon:
             fill-group-hover:     'group-hover:fill-red-800'
             stroke-group-hover: 'group-hover:stroke-red-800'
 ```
-# @TODO default options
+
+`default` - Override the default options provided to the bundle.
 
 `directories` - Which directories to look in for icons.
 
-`colours` - Custom colours to use when colouring icons. Because this extension relies on Tailwind classes for colouring we must specify all the classes. This is a bit awkward, but you can just copy this template replacing COLOUR as appropriate:
+`colours` - Custom colours to use when colouring icons. Because this extension relies on Tailwind classes for colouring we **must** explicitly list all the classes required for Tailwind to render them properly. You can just copy this template replacing COLOUR as appropriate:
 
 ```yaml
 COLOUR:
@@ -51,26 +52,17 @@ COLOUR:
 
 ## Options
 
-`icon (string)` **(REQUIRED)** Icon to use, without the `.svg` extension
+`icon (string)` **(REQUIRED)** Icon to use, without the `.svg` extension.
 
-`title (string)` Optional text to show on hover
+`title (string)` Optional text to show on hover. This can be null, but not an empty string.
 
-`size (int)` Size of the icon in pixels
+`size (int)` Size of the icon in pixels.
 
-`colour (string)` Name of the colour to use. Defaults to `primary` as it assumes you have a Tailwind colour set up called `primary`. If however you are not using `primary` to set a Tailwind primary colour in your project, you can instead set the default colour of the icon by changing what colour classes the primary colour uses. EG:
+`colour (string)` Name of the colour to use. Defaults to `primary` as it assumes you have a Tailwind colour set up called `primary`. If you are not using `primary` to set a Tailwind primary colour in your project you can change the default colour in the `pcm_icon.yaml` file.
-```yaml
-primary:
-    fill:                             'fill-purple-700'
-    stroke:                         'stroke-purple-700'
-    fill-hover:                 'hover:fill-purple-700'
-    stroke-hover:             'hover:stroke-purple-700'
-    fill-group-hover:     'group-hover:fill-purple-700'
-    stroke-group-hover: 'group-hover:stroke-purple-700'
-```
 
 `hover (string)` Name of the colour to use when the icon is hovered over
 
-`classes (string[])` Additional classes to add to the icon. This can cause Tailwind class collisions, so only use it as a last resort.
+`classes (string[]|string)` Additional classes to add to the icon as either an array of strings or a space-separated string. This can cause Tailwind class collisions, so it is not recommended to use.
 
 ## Reminders
 Remember to add `./config/packages/*.yaml` as a value in your Tailwind config content array if it does not already exist. This will ensure Tailwind classes inside of the config file get compiled.

src/Exception/EmptyFileException.php

@@ -0,0 +1,7 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Pcm\IconBundle\Exception;
+
+class EmptyFileException extends \Exception {};

src/Exception/InvalidSvgException.php

@@ -0,0 +1,7 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Pcm\IconBundle\Exception;
+
+class InvalidSvgException extends \Exception {};

src/Twig/Extension/IconExtension.php

@@ -16,7 +16,7 @@ final class IconExtension extends AbstractExtension
     public function getFunctions(): array
     {
         return [
-            new TwigFunction('pcm_icon', [IconRuntime::class, 'renderIcon'])
+            new TwigFunction('pcm_icon', [IconRuntime::class, 'renderIcon'], ['is_safe' => ['html']])
         ];
     }
 }

src/Twig/Runtime/IconRuntime.php

@@ -5,7 +5,9 @@ declare(strict_types=1);
 namespace Pcm\IconBundle\Twig\Runtime;
 
 use Pcm\IconBundle\Exception\ColourNotFound;
+use Pcm\IconBundle\Exception\EmptyFileException;
 use Pcm\IconBundle\Exception\IconNotFound;
+use Pcm\IconBundle\Exception\InvalidSvgException;
 use Twig\Extension\RuntimeExtensionInterface;
 
 final class IconRuntime implements RuntimeExtensionInterface
@@ -16,7 +18,7 @@ final class IconRuntime implements RuntimeExtensionInterface
         'size'    => null,
         'colour'  => null,
         'hover'   => null,
-        'classes' => [],
+        'classes' => "",
     ];
 
     public function __construct(private array $defaultOptions, private array $directories, private array $colours)
@@ -31,7 +33,8 @@ final class IconRuntime implements RuntimeExtensionInterface
      *     'size'    => (int)             Height and width in px
      *     'colour'  => (string)          Main colour
      *     'hover'   => (?string)         Hover colour
-     *     'classes' => (array)   Additional classes to add to the icon. Not recommended.
+     *     'classes' => (string[]|string) Additional classes to add to the icon, given as
+     *                                    an array of strings or a space-separated string.
      * ]
      * ```
      *
@@ -43,6 +46,14 @@ final class IconRuntime implements RuntimeExtensionInterface
 
         $svg = $this->getSvg($options['icon']);
 
+        if (empty($svg)) {
+            throw new EmptyFileException(\sprintf("The file %s.svg was found, but it was empty!", $options['icon']));
+        }
+
+        if (!$this->isValidXml($svg)) {
+            throw new InvalidSvgException(\sprintf("The file %s.svg was found, but it does not contain valid SVG code!", $options['icon']));
+        }
+
         $this->sanitiseSvg($svg);
 
         $colourClasses = $this->getColourClasses($options['colour'], $options['hover']);
@@ -51,8 +62,11 @@ final class IconRuntime implements RuntimeExtensionInterface
         $classes = trim($colourClasses.' '.$extraClasses);
         $this->addClassesToSvg($svg, $classes);
 
+        $svg = $this->addAttribute($svg, 'aria-hidden', 'true');
+
         if (null !== $options['title']) {
             $this->addTitleToSvg($svg, $options['title']);
+            $svg = $this->addAttribute($svg, 'aria-hidden', 'false');
         }
 
         $this->setSvgHeightAndWidth($svg, $options['size']);
@@ -60,9 +74,9 @@ final class IconRuntime implements RuntimeExtensionInterface
         return $svg;
     }
 
-    private function getExtraClasses(array $extraClasses): string
+    private function getExtraClasses(array|string $extraClasses): string
     {
-        return implode(' ', $extraClasses);
+        return \is_array($extraClasses) ? implode(' ', $extraClasses) : $extraClasses;
     }
 
     private function mergeWithDefaultOptions(array $userOptions): array
@@ -103,6 +117,9 @@ final class IconRuntime implements RuntimeExtensionInterface
         $this->removeBlackFillAttributes($svg);
     }
 
+    /**
+     * @throws IconNotFound when an svg file with the passed in name cannot be found
+     */
     private function findSvgFilepath(string $iconName): string
     {
         foreach ($this->directories as $directory) {
@@ -202,4 +219,23 @@ final class IconRuntime implements RuntimeExtensionInterface
 
         $svg = $this->removeXMLDeclaration($svgAsXml->saveXML());
     }
+
+    private function addAttribute(string $svg, string $attribute, string $value): string
+    {
+        $xml = new \SimpleXMLElement($svg);
+        $xml = $this->addAttributeToXmlElement($xml, $attribute, $value);
+
+        return $this->removeXMLDeclaration($xml->saveXML());
+    }
+
+    private function isValidXml(string $input): bool
+    {
+        try {
+            new \SimpleXMLElement($input);
+        } catch (\Exception) {
+            return false;
+        }
+
+        return true;
+    }
 }

tests/Twig/Runtime/IconRuntimeTest.php

@@ -6,7 +6,9 @@ namespace Pcm\IconBundle\Tests\Twig\Functions;
 
 use Pcm\IconBundle\DependencyInjection\Configuration;
 use Pcm\IconBundle\Exception\ColourNotFound;
+use Pcm\IconBundle\Exception\EmptyFileException;
 use Pcm\IconBundle\Exception\IconNotFound;
+use Pcm\IconBundle\Exception\InvalidSvgException;
 use Pcm\IconBundle\Twig\Runtime\IconRuntime;
 use PHPUnit\Framework\TestCase;
 
@@ -50,6 +52,18 @@ class IconRuntimeTest extends TestCase
         $this->icon->renderIcon(['icon' => random_bytes(8)]);
     }
 
+    public function testThrowsIfPassedInAnEmptyFile(): void
+    {
+        $this->expectException(EmptyFileException::class);
+        $this->icon->renderIcon(['icon' => 'empty']);
+    }
+
+    public function testThrowsIfContentsIsNotValidSvg(): void
+    {
+        $this->expectException(InvalidSvgException::class);
+        $this->icon->renderIcon(['icon' => 'invalid']);
+    }
+
     public function testNoTitleExistsIfNotPassedIn(): void
     {
         $content = $this->icon->renderIcon(['icon' => self::ICON]);
@@ -225,19 +239,26 @@ class IconRuntimeTest extends TestCase
         $this->assertMatchesRegularExpression('/<svg.+class=".*group-hover:stroke-white.*".*>/', $contents);
     }
 
-    public function testExtraClassesThrowsIfNotAnArray(): void
+    public function testExtraClassesThrowsIfNotAnArrayOrString(): void
     {
         $this->expectException(\TypeError::class);
-        $this->icon->renderIcon(['icon' => self::ICON, 'classes' => 'string_value']);
+        $this->icon->renderIcon(['icon' => self::ICON, 'classes' => 1]);
     }
 
-    public function testExtraClassesGetAdded(): void
+    public function testExtraClassesGetAddedFromArray(): void
     {
         $contents = $this->icon->renderIcon(['icon' => self::ICON, 'classes' => ['abc', 'def']]);
         $this->assertMatchesRegularExpression('/<svg.+class=".*abc.*".*>/', $contents);
         $this->assertMatchesRegularExpression('/<svg.+class=".*def.*".*>/', $contents);
     }
 
+    public function testExtraClassesGetAddedFromString(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => self::ICON, 'classes' => 'ghi jkl']);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*ghi.*".*>/', $contents);
+        $this->assertMatchesRegularExpression('/<svg.+class=".*jkl.*".*>/', $contents);
+    }
+
     public function testAddingExtraClassesDoesntStripAwayColourClasses(): void
     {
         $contents = $this->icon->renderIcon(['icon' => self::ICON, 'classes' => ['abc']]);
@@ -259,4 +280,23 @@ class IconRuntimeTest extends TestCase
         $this->assertStringNotContainsString($needleA, $contents);
         $this->assertStringNotContainsString($needleB, $contents);
     }
+
+    public function testAriaHiddenAttributeIsAdded(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => self::ICON]);
+        $this->assertMatchesRegularExpression('/<svg.+aria-hidden="true".*>/', $contents);
+    }
+
+    public function testAriaHiddenAttributeIsSetToTrueIfAlreadyPresent(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => 'attr']);
+        $this->assertMatchesRegularExpression('/<svg.+aria-hidden="true".*>/', $contents);
+        $this->assertDoesNotMatchRegularExpression('/<svg.+aria-hidden="false".*>/', $contents);
+    }
+
+    public function testAriaHiddenAttributeIsSetToFalseIfATitleIsPassedIn(): void
+    {
+        $contents = $this->icon->renderIcon(['icon' => self::ICON, 'title' => 'something']);
+        $this->assertMatchesRegularExpression('/<svg.+aria-hidden="false".*>/', $contents);
+    }
 }

tests/icons/attr.svg

@@ -0,0 +1,10 @@
+<svg aria-hidden="false" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="96 96 320 320">
+    <title>Some cross lol</title>
+    <line fill="rgb(0,  0, 0)"></line>
+    <line fill="#000"></line>
+    <line fill="#000000"></line>
+    <line stroke="currentColor" fill="black"></line>
+    <line x1="256" y1="112" x2="256" y2="400" width="101" height="101" style="fill: none; stroke: rgb(0,0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></line>
+    <line x1="400" y1="256" x2="112" y2="256" width="102" height="102" style="fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px;"></line>
+    <polyline points="112 244 256 100 400 244" style="fill:#000;fill:#000000;fill: black;fill:rgb(0,0,0);stroke:#000;stroke:#000000;stroke:black;stroke:rgb(0, 0, 0);stroke-linecap:round;stroke-linejoin:round;stroke-width:48px" stroke='currentColor'/>
+</svg>

tests/icons/invalid.svg

@@ -0,0 +1 @@
+<svg><svg>