add IconifyOnDemandRegistry

Author: kbond

src/Icons/README.md

@@ -6,40 +6,54 @@
 composer require symfony/ux-icons
 ```
 
-## Add Icons
+## Icons?
 
-No icons are provided by this package. Add your svg icons to the `assets/icons/` directory and commit them.
-The name of the file is used as the name of the icon (`name.svg` will be named `name`).
+No icons are provided by this package but there are several ways to include and render icons. 
 
-### Import Command
+### Local SVG Icons
 
-The [Iconify Design](https://iconify.design/) has a huge searchable repository of icons from
-many different icon sets. This package provides a command to locally install icons from this
-site.
+Add your svg icons to the `assets/icons/` directory and commit them.
+The name of the file is used as the _name_ of the icon (`name.svg` will be named `name`).
+If located in a subdirectory, the _name_ will be `sub-dir:name`.
+
+### Iconify Icons
+
+[Iconify Design](https://iconify.design/) is a huge searchable repository of icons from many different icon sets.
+This package provides a way to include any icon found on this site _on-demand_.
 
 1. Visit [Iconify Design](https://icon-sets.iconify.design/) and search for an icon
    you'd like to use. Once you find one you like, visit the icon's profile page and use the widget
    to copy its name. For instance, https://icon-sets.iconify.design/flowbite/user-solid/ has the name
    `flowbite:user-solid`.
-2. Run the following command, replacing `flowbite:user-solid` with the name of the icon you'd like
-   to install:
+2. Just use this name in the [`ux_icon()`](#usage) function and the icon will be fetched (and cached)
+   from the Iconify API.
+3. That's it!
+
+> [!NOTE]
+> [Local SVG Icons](#local-svg-icons) of the same name will have precedence over _Iconify-on-demand_ icons.
+
+#### Import Command
 
-    ```bash
-    bin/console ux:icons:import flowbite:user-solid # saved as `user-solid.svg` and name is `user-solid`
+You can import any icon from Iconify to your local directory using the `ux:icons:import` command:
 
-    # adjust the local name
-    bin/console ux:icons:import flowbite:user-solid@user # saved as `user.svg` and name is `user`
-   
-    # import several at a time
-    bin/console ux:icons:import flowbite:user-solid flowbite:home-solid
-    ```
+ ```bash
+ bin/console ux:icons:import flowbite:user-solid # saved as `user-solid.svg` and name is `user-solid`
+
+ # adjust the local name
+ bin/console ux:icons:import flowbite:user-solid@user # saved as `user.svg` and name is `user`
+
+ # import several at a time
+ bin/console ux:icons:import flowbite:user-solid flowbite:home-solid
+ ```
 
 ## Usage
 
 ```twig
 {{ ux_icon('user-profile', {class: 'w-4 h-4'}) }} <!-- renders "user-profile.svg" -->
 
 {{ ux_icon('sub-dir:user-profile', {class: 'w-4 h-4'}) }} <!-- renders "sub-dir/user-profile.svg" (sub-directory) -->
+
+{{ ux_icon('flowbite:user-solid') }} <!-- renders "flowbite:user-solid" from Iconify -->
 ```
 
 ### HTML Syntax
@@ -51,6 +65,8 @@ site.
 <twig:UX:Icon name="user-profile" class="w-4 h-4" /> <!-- renders "user-profile.svg" -->
 
 <twig:UX:Icon name="sub-dir:user-profile" class="w-4 h-4" /> <!-- renders "sub-dir/user-profile.svg" (sub-directory) -->
+
+<twig:UX:Icon name="flowbite:user-solid" /> <!-- renders "flowbite:user-solid" from Iconify -->
 ```
 
 ## Caching

src/Icons/config/iconify.php

@@ -13,9 +13,16 @@
 
 use Symfony\UX\Icons\Command\ImportIconCommand;
 use Symfony\UX\Icons\Iconify;
+use Symfony\UX\Icons\Registry\IconifyOnDemandRegistry;
 
 return static function (ContainerConfigurator $container): void {
     $container->services()
+        ->set('.ux_icons.iconify_on_demand_registry', IconifyOnDemandRegistry::class)
+            ->args([
+                service('.ux_icons.iconify'),
+            ])
+            ->tag('ux_icons.registry')
+
         ->set('.ux_icons.iconify', Iconify::class)
             ->args([
                 abstract_arg('endpoint'),

src/Icons/src/Iconify.php

@@ -11,10 +11,12 @@
 
 namespace Symfony\UX\Icons;
 
+use Symfony\Component\HttpClient\Exception\JsonException;
 use Symfony\Component\HttpClient\HttpClient;
 use Symfony\Component\HttpClient\ScopingHttpClient;
 use Symfony\Contracts\HttpClient\HttpClientInterface;
 use Symfony\UX\Icons\Exception\IconNotFoundException;
+use Symfony\UX\Icons\Svg\Icon;
 
 /**
  * @author Kevin Bond <kevinbond@gmail.com>
@@ -33,15 +35,32 @@ public function __construct(
             throw new \LogicException('You must install "symfony/http-client" to use Iconify. Try running "composer require symfony/http-client".');
         }
 
-        $this->http = new ScopingHttpClient($http ?? HttpClient::create(), [
-            'base_uri' => $endpoint,
+        $this->http = ScopingHttpClient::forBaseUri($http ?? HttpClient::create(), $endpoint);
+    }
+
+    public function fetchIcon(string $prefix, string $name): Icon
+    {
+        $response = $this->http->request('GET', sprintf('/%s.json?icons=%s', $prefix, $name));
+
+        try {
+            $data = $response->toArray();
+        } catch (JsonException) {
+            throw new IconNotFoundException(sprintf('The icon "%s:%s" does not exist on iconify.design.', $prefix, $name));
+        }
+
+        if (!isset($data['icons'][$name]['body'])) {
+            throw new IconNotFoundException(sprintf('The icon "%s:%s" does not exist on iconify.design.', $prefix, $name));
+        }
+
+        return new Icon($data['icons'][$name]['body'], [
+            'viewBox' => sprintf('0 0 %s %s', $data['width'], $data['height']),
         ]);
     }
 
     public function fetchSvg(string $prefix, string $name): string
     {
         $content = $this->http
-            ->request('GET', sprintf('https://api.iconify.design/%s/%s.svg', $prefix, $name))
+            ->request('GET', sprintf('/%s/%s.svg', $prefix, $name))
             ->getContent()
         ;
 

src/Icons/src/Registry/IconifyOnDemandRegistry.php

@@ -0,0 +1,38 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Icons\Registry;
+
+use Symfony\UX\Icons\Exception\IconNotFoundException;
+use Symfony\UX\Icons\Iconify;
+use Symfony\UX\Icons\IconRegistryInterface;
+use Symfony\UX\Icons\Svg\Icon;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @internal
+ */
+final class IconifyOnDemandRegistry implements IconRegistryInterface
+{
+    public function __construct(private Iconify $iconify)
+    {
+    }
+
+    public function get(string $name): Icon
+    {
+        if (2 !== \count($parts = explode(':', $name))) {
+            throw new IconNotFoundException(sprintf('The icon name "%s" is not valid.', $name));
+        }
+
+        return $this->iconify->fetchIcon(...$parts);
+    }
+}

src/Icons/src/Registry/LocalSvgIconRegistry.php

@@ -30,10 +30,6 @@ public function __construct(private string $iconDir)
 
     public function get(string $name): Icon
     {
-        if (!Icon::isValidName($name)) {
-            throw new IconNotFoundException(sprintf('The icon name "%s" is not valid.', $name));
-        }
-
         if (!file_exists($filename = sprintf('%s/%s.svg', $this->iconDir, str_replace(':', '/', $name)))) {
             throw new IconNotFoundException(sprintf('The icon "%s" (%s) does not exist.', $name, $filename));
         }

src/Icons/tests/Fixtures/templates/template1.html.twig

@@ -5,4 +5,5 @@
     <li id="fifth"><twig:UX:Icon name="user" class="h-8 w-8" /></li>
     <li id="sixth"><twig:UX:Icon name="sub:check" /></li>
     <li id="seventh"><twig:UX:Icon :name="'sub:'~'check'" /></li>
+    <li id="eighth">{{ ux_icon('iconamoon:3d-duotone') }}</li>
 </ul>

src/Icons/tests/Fixtures/templates/template2.html.twig

@@ -1,2 +1,3 @@
 {{ ux_icon('something:invalid') }}
 {{ ux_icon('invalid') }}
+{{ ux_icon('iconamoon:invalid') }}

src/Icons/tests/Integration/Command/WarmCacheCommandTest.php

@@ -28,6 +28,7 @@ public function testCanWarmCache(): void
             ->assertOutputContains('Warming the icon cache...')
             ->assertOutputContains('Warmed icon user.')
             ->assertOutputContains('Warmed icon sub:check.')
+            ->assertOutputContains('Warmed icon iconamoon:3d-duotone.')
             ->assertOutputContains('Icon cache warmed.')
         ;
     }

src/Icons/tests/Integration/RenderIconsInTwigTest.php

@@ -31,6 +31,7 @@ public function testRenderIcons(): void
                 <li id="fifth"><svg viewBox="0 0 24 24" fill="currentColor" class="h-8 w-8"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd"></path></svg></li>
                 <li id="sixth"><svg viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg></li>
                 <li id="seventh"><svg viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd"></path></svg></li>
+                <li id="eighth"><svg viewBox="0 0 24 24" fill="currentColor"><g fill="none"><path fill="currentColor" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z" opacity=".16"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 3l7.794 4.5v7.845a2 2 0 0 1-1 1.732L13 20.423a2 2 0 0 1-2 0l-5.794-3.346a2 2 0 0 1-1-1.732V7.5z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v5l-4.33 2.5M12 12l4.33 2.5"/></g></svg></li>
             </ul>
             HTML,
             trim($output)