add ux:icons:import command

Author: kbond

src/Icons/README.md

@@ -11,6 +11,29 @@ composer require symfony/ux-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`).
 
+### Import Command
+
+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.
+
+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:
+
+    ```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

src/Icons/composer.json

@@ -33,6 +33,7 @@
     },
     "require-dev": {
         "symfony/console": "^6.4|^7.0",
+        "symfony/http-client": "6.4|^7.0",
         "symfony/phpunit-bridge": "^6.3|^7.0",
         "symfony/ux-twig-component": "^2.14",
         "zenstruck/console-test": "^1.5"

src/Icons/config/services.php

@@ -11,6 +11,8 @@
 
 namespace Symfony\Component\DependencyInjection\Loader\Configurator;
 
+use Symfony\UX\Icons\Command\ImportIconCommand;
+use Symfony\UX\Icons\Iconify;
 use Symfony\UX\Icons\IconRenderer;
 use Symfony\UX\Icons\Registry\CacheIconRegistry;
 use Symfony\UX\Icons\Registry\LocalSvgIconRegistry;
@@ -54,5 +56,17 @@
 
         ->set('.ux_icons.twig_component.icon', UXIconComponent::class)
             ->tag('twig.component', ['key' => 'UX:Icon'])
+
+        ->set('.ux_icons.iconify', Iconify::class)
+            ->args([
+                service('http_client')->nullOnInvalid(),
+            ])
+
+        ->set('.ux_icons.command.import', ImportIconCommand::class)
+            ->args([
+                service('.ux_icons.iconify'),
+                service('.ux_icons.local_svg_icon_registry'),
+            ])
+            ->tag('console.command')
     ;
 };

src/Icons/src/Command/ImportIconCommand.php

@@ -0,0 +1,78 @@
+<?php
+
+namespace Symfony\UX\Icons\Command;
+
+use Symfony\Component\Console\Attribute\AsCommand;
+use Symfony\Component\Console\Command\Command;
+use Symfony\Component\Console\Input\InputArgument;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Output\OutputInterface;
+use Symfony\Component\Console\Style\SymfonyStyle;
+use Symfony\UX\Icons\Exception\IconNotFoundException;
+use Symfony\UX\Icons\Iconify;
+use Symfony\UX\Icons\Registry\LocalSvgIconRegistry;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @internal
+ */
+#[AsCommand(
+    name: 'ux:icons:import',
+    description: 'Import icon(s) from iconify.design',
+)]
+final class ImportIconCommand extends Command
+{
+    public function __construct(private Iconify $iconify, private LocalSvgIconRegistry $registry)
+    {
+        parent::__construct();
+    }
+
+    protected function configure(): void
+    {
+        $this
+            ->addArgument(
+                'names',
+                InputArgument::IS_ARRAY | InputArgument::REQUIRED,
+                'Icon name from iconify.design (suffix with "@<name>" to rename locally)',
+            )
+        ;
+    }
+
+    protected function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $io = new SymfonyStyle($input, $output);
+        $names = $input->getArgument('names');
+        $result = Command::SUCCESS;
+
+        foreach ($names as $name) {
+            if (!preg_match('#^(([\w-]+):([\w-]+))(@([\w-]+))?$#', $name, $matches)) {
+                $io->error(sprintf('Invalid icon name "%s".', $name));
+                $result = Command::FAILURE;
+
+                continue;
+            }
+
+            [,,$prefix, $name] = $matches;
+            $localName = $matches[5] ?? $name;
+
+            $io->comment(sprintf('Importing <info>%s:%s</info> as <info>%s</info>...', $prefix, $name, $localName));
+
+            try {
+                $svg = $this->iconify->fetchSvg($prefix, $name);
+            } catch (IconNotFoundException $e) {
+                $io->error($e->getMessage());
+                $result = Command::FAILURE;
+
+                continue;
+            }
+
+            $this->registry->add($localName, $svg);
+
+            $io->text(sprintf("<info>Imported Icon</info>, render with <comment>{{ ux_icon('%s') }}</comment>.", $localName));
+            $io->newLine();
+        }
+
+        return $result;
+    }
+}

src/Icons/src/DependencyInjection/UXIconsExtension.php

@@ -65,5 +65,9 @@ protected function loadInternal(array $mergedConfig, ContainerBuilder $container
         $container->getDefinition('.ux_icons.icon_renderer')
             ->setArgument(1, $mergedConfig['default_icon_attributes'])
         ;
+
+        if (!$container->getParameter('kernel.debug')) {
+            $container->removeDefinition('.ux_icons.command.import');
+        }
     }
 }

src/Icons/src/Iconify.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace Symfony\UX\Icons;
+
+use Symfony\Contracts\HttpClient\HttpClientInterface;
+use Symfony\UX\Icons\Exception\IconNotFoundException;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ *
+ * @internal
+ */
+final class Iconify
+{
+    public function __construct(private ?HttpClientInterface $httpClient = null)
+    {
+    }
+
+    public function fetchSvg(string $prefix, string $name): string
+    {
+        $content = $this->http()
+            ->request('GET', sprintf('https://api.iconify.design/%s/%s.svg', $prefix, $name))
+            ->getContent()
+        ;
+
+        if (!str_starts_with($content, '<svg')) {
+            throw new IconNotFoundException(sprintf('The icon "%s:%s" does not exist on iconify.design.', $prefix, $name));
+        }
+
+        return $content;
+    }
+
+    private function http(): HttpClientInterface
+    {
+        return $this->httpClient ?? throw new \LogicException('You must install "symfony/http-client" to import icons. Try running "composer require symfony/http-client".');
+    }
+}

src/Icons/src/Registry/LocalSvgIconRegistry.php

@@ -11,6 +11,7 @@
 
 namespace Symfony\UX\Icons\Registry;
 
+use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Finder\Finder;
 use Symfony\UX\Icons\Exception\IconNotFoundException;
 use Symfony\UX\Icons\IconRegistryInterface;
@@ -75,6 +76,13 @@ public function get(string $name): Icon
         return new Icon($innerSvg, $attributes);
     }
 
+    public function add(string $name, string $svg): void
+    {
+        $filename = sprintf('%s/%s.svg', $this->iconDir, $name);
+
+        (new Filesystem())->dumpFile($filename, $svg);
+    }
+
     public function getIterator(): \Traversable
     {
         foreach ($this->finder()->sortByName() as $file) {

src/Icons/tests/Fixtures/TestKernel.php

@@ -36,6 +36,7 @@ protected function configureContainer(ContainerConfigurator $c): void
             'http_method_override' => false,
             'php_errors' => ['log' => true],
             'property_access' => true,
+            'http_client' => true,
         ]);
 
         $c->extension('twig_component', [

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

@@ -0,0 +1,76 @@
+<?php
+
+namespace Symfony\UX\Icons\Tests\Integration\Command;
+
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\Filesystem\Filesystem;
+use Zenstruck\Console\Test\InteractsWithConsole;
+
+/**
+ * @author Kevin Bond <kevinbond@gmail.com>
+ */
+final class ImportIconCommandTest extends KernelTestCase
+{
+    use InteractsWithConsole;
+
+    private const ICON_DIR = __DIR__.'/../../Fixtures/icons';
+    private const ICONS = ['dashboard.svg', 'renamed.svg'];
+
+    /**
+     * @before
+     *
+     * @after
+     */
+    public static function cleanup(): void
+    {
+        $fs = new Filesystem();
+
+        foreach (self::ICONS as $icon) {
+            $fs->remove(self::ICON_DIR.'/'.$icon);
+        }
+    }
+
+    public function testCanImportIcon(): void
+    {
+        $this->assertFileDoesNotExist($expectedFile = self::ICON_DIR.'/dashboard.svg');
+
+        $this->executeConsoleCommand('ux:icons:import uiw:dashboard')
+            ->assertSuccessful()
+            ->assertOutputContains('Importing uiw:dashboard as dashboard')
+            ->assertOutputContains("render with {{ ux_icon('dashboard') }}")
+        ;
+
+        $this->assertFileExists($expectedFile);
+    }
+
+    public function testCanImportIconAndRename(): void
+    {
+        $this->assertFileDoesNotExist($expectedFile = self::ICON_DIR.'/renamed.svg');
+
+        $this->executeConsoleCommand('ux:icons:import uiw:dashboard@renamed')
+            ->assertSuccessful()
+            ->assertOutputContains('Importing uiw:dashboard as renamed')
+            ->assertOutputContains("render with {{ ux_icon('renamed') }}")
+        ;
+
+        $this->assertFileExists($expectedFile);
+    }
+
+    public function testImportInvalidIconName(): void
+    {
+        $this->executeConsoleCommand('ux:icons:import something')
+            ->assertStatusCode(1)
+            ->assertOutputContains('[ERROR] Invalid icon name "something".')
+        ;
+    }
+
+    public function testImportNonExistentIcon(): void
+    {
+        $this->executeConsoleCommand('ux:icons:import something:invalid')
+            ->assertStatusCode(1)
+            ->assertOutputContains('[ERROR] The icon "something:invalid" does not exist on iconify.design.')
+        ;
+
+        $this->assertFileDoesNotExist(self::ICON_DIR.'/invalid.svg');
+    }
+}