Merge pull request #1 from celdia/ui-icons-test

UI icons test

modules/ui_icons_library/src/Controller/IconsetsController.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace Drupal\ui_icons_library\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Url;
+
+/**
+ * Class IconDisplayController.
+ */
+class IconsetsController extends ControllerBase {
+
+  const OVERVIEW_SLICE = 20;
+
+  /**
+   * Display icons.
+   *
+   * @return array
+   *   Return render array.
+   */
+  public function overview() {
+    $build = [];
+    $iconsets = \Drupal::service('strategy.manager.iconset')->getIconsets();
+    foreach ($iconsets as $iconset_id => $label) {
+      $iconset = \Drupal::service('strategy.manager.iconset')->getInstance($iconset_id);
+      $icons = $iconset->getIcons();
+      $icons_id = array_keys($icons);
+      $icons_id = array_slice($icons_id, 0, static::OVERVIEW_SLICE);
+      $build[] = [
+        '#type' => 'html_tag',
+        '#tag' => 'h2',
+        '#value' => $label,
+      ];
+      foreach ($icons_id as $icon_id) {
+        $build[] = $iconset->build($icon_id);
+      }
+      $build[] = [
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        0 => [
+          '#type' => 'link',
+          '#title' => $this->t("View more"),
+          '#url' => Url::fromRoute('ui_icons.single', ["iconset_id" => $iconset_id]),
+        ],
+      ];
+    }
+
+    return $build;
+  }
+
+  /**
+   * Display icons.
+   *
+   * @return array
+   *   Return render array.
+   */
+  public function single(string $iconset_id) {
+    $build = [];
+    $iconset = \Drupal::service('strategy.manager.iconset')->getInstance($iconset_id);
+    $icons = $iconset->getIcons();
+    foreach ($icons as $icon_id => $icon) {
+      $build[] = $iconset->build($icon_id);
+    }
+    return $build;
+  }
+
+}

modules/ui_icons_library/ui_icons_library.info.yml

@@ -0,0 +1,7 @@
+name: Iconset Library
+type: module
+description: 'A sous module of UI Icons to display icons library'
+core_version_requirement: ^9 || ^10
+package: Custom
+dependencies:
+  - ui_icons:ui_icons

modules/ui_icons_library/ui_icons_library.routing.yml

@@ -0,0 +1,24 @@
+#ui_suite.index:
+#  path: '/admin/appearance/ui-libraries'
+#  defaults:
+#    _controller: '\Drupal\system\Controller\SystemController::systemAdminMenuBlockPage'
+#    _title: 'UI libraries'
+#  requirements:
+#    _permission: 'access content'
+
+ui_icons.overview:
+  path: '/icons'
+  defaults:
+    _controller: '\Drupal\ui_icons_library\Controller\IconsetsController::overview'
+    _title: 'Iconsets library'
+  requirements:
+    _permission: 'access content'
+
+ui_icons.single:
+  path: '/icons/{iconset_id}'
+  defaults:
+    _controller: '\Drupal\ui_icons_library\Controller\IconsetsController::single'
+    _title: 'Iconset details'
+  requirements:
+    _permission: 'access content'
+

src/Asset/CodepointsAsset.php

@@ -0,0 +1,68 @@
+<?php
+
+namespace Drupal\ui_icons\Asset;
+
+use Drupal\iconset\Asset\AssetInterface;
+
+/**
+ * ...
+ */
+class CodepointsAsset implements AssetInterface {
+
+
+  /**
+   * The list of icon data keyed by the icon ID.
+   *
+   * @var array
+   */
+  protected $icons;
+
+  /**
+   * ...
+   *
+   * @param string $url
+   *   ...
+   */
+  public function __construct(string $url) {
+    $this->icons = $this->fetchCodepoints($url);
+  }
+
+  /**
+   *
+   */
+  protected function fetchCodepoints(string $url): array {
+    $icons = [];
+
+    $data = file_get_contents($url);
+    if ($data === FALSE) {
+      return [];
+    }
+
+    $lines = explode("\n", $data);
+    foreach ($lines as $line) {
+      if (empty($line)) {
+        continue;
+      }
+      [$icon_id, $codepoint] = explode(' ', $line);
+      $icons[$icon_id] = [
+        'label' => $icon_id,
+      ];
+    }
+    return $icons;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getIcons() {
+    return $this->icons;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getIcon($icon_id) {
+    return $this->icons[$icon_id] ?? FALSE;
+  }
+
+}

src/Plugin/Iconset/CodepointsHandler.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace Drupal\ui_icons\Plugin\Iconset;
+
+use Drupal\Core\Plugin\PluginBase;
+use Drupal\iconset\Asset\AssetInterface;
+use Drupal\iconset\IconsetInterface;
+use Drupal\iconset\Plugin\IconHandlerInterface;
+use Drupal\ui_icons\Asset\CodepointsAsset;
+
+/**
+ * ...
+ *
+ * @IconsetIconHandler(
+ *   id = "codepoints",
+ *   label = @Translation("Codepoints"),
+ * )
+ */
+class CodepointsHandler extends PluginBase implements IconHandlerInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function createAssets($asset_info, IconsetInterface $iconset) {
+    return new CodepointsAsset($asset_info);
+  }
+
+  /**
+   *
+   */
+  public function build($icon_id, AssetInterface $iconset, array $options = []) {
+    $config = $this->configuration;
+    return [
+      '#type' => 'inline_template',
+      "#template" => $config['template'],
+      "#context" => [
+        'icon_id' => $icon_id,
+      ],
+      "#attached" => [
+        "library" => [
+          $config['library'],
+        ],
+      ],
+    ];
+  }
+
+  /**
+   *
+   */
+  public function getJsSettings() {
+    // @todo Implement getJsSettings() method.
+    return [];
+  }
+
+  /**
+   *
+   */
+  public function formatJson(AssetInterface $asset) {
+    // @todo Implement formatJson() method.
+    // return [];
+    $icons = $asset->getIcons();
+    $formatted_icons = [];
+
+    foreach ($icons as $icon_id => $icon_data) {
+      $formatted_icons[] = [
+        'id' => $icon_id,
+        'label' => $icon_data['label'],
+      ];
+    }
+
+    return json_encode($formatted_icons);
+  }
+
+}

tests/modules/ui_icons_test/ui_icons_test.iconset.yml

@@ -0,0 +1,78 @@
+bootstrap_icons:
+  label: 'Bootstrap Icons'
+  plugin: 'svg'
+  assets:
+    - '/libraries/bootstrap-icons/icons'
+
+dsfr:
+  label: 'DSFR'
+  plugin: 'svg'
+  assets:
+    - '/libraries/dsfr/src/core/icon'
+
+remixicons:
+  label: 'Remix Icons'
+  plugin: 'svg'
+  assets:
+    - '/libraries/remixicons/icons'
+    - '/libraries/remixicons/fonts/remixicon.symbol.svg'
+    - 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.symbol.svg'
+
+tailwind:
+  label: 'Tailwind'
+  plugin: 'svg'
+  assets:
+    - '/libraries/heroicons/optimized/24/outline'
+    - '/libraries/heroicons/src/24/solid'
+
+uswsd:
+  label: 'US Web Design System'
+  plugin: 'svg'
+  assets:
+    - '/libraries/uswds/packages/usa-icon/src/img/usa-icons-bg'
+    - '/libraries/uswds/packages/usa-icon/src/img/uswds-icons'
+
+material_icons_outlined:
+  label: 'Material Icons Outlined'
+  plugin: 'codepoints'
+  config:
+    template : '<span class="material-icons-outlined">{{ icon_id }}</span>'
+    library: 'ui_icons_test/material'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.codepoints'
+
+material_icons_round:
+  label: 'Material Icons Round'
+  plugin: 'codepoints'
+  config:
+    template: '<span class="material-icons-round">{{ icon_id }}</span>'
+    library: 'ui_icons_test/material'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.codepoints'
+
+material_icons_sharp:
+  label: 'Material Icons Sharp'
+  plugin: 'codepoints'
+  config:
+    template: '<span class="material-icons-sharp">{{ icon_id }}</span>'
+    library: 'ui_icons_test/material'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.codepoints'
+
+material_icons_two_tone:
+  label: 'Material Icons Two Tone'
+  plugin: 'codepoints'
+  config:
+    template: '<span class="material-icons-two-tone">{{ icon_id }}</span>'
+    library: 'ui_icons_test/material'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.codepoints'
+
+material_icons_filled:
+  label: 'Material Icons'
+  plugin: 'codepoints'
+  config:
+    template: '<span class="material-icons">{{ icon_id }}</span>'
+    library: 'ui_icons_test/material'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.codepoints'

tests/modules/ui_icons_test/ui_icons_test.info.yml

@@ -0,0 +1,10 @@
+name: 'UI Icons Test'
+type: module
+description: 'A custom module to display icons using Iconset'
+core_version_requirement: ^9 || ^10
+package: Custom
+dependencies:
+  - iconset:iconset
+  - ui_icons:ui_icons
+  - ui_icons_library:ui_icons_library
+

tests/modules/ui_icons_test/ui_icons_test.libraries.yml

@@ -0,0 +1,4 @@
+material:
+  css:
+    base:
+        https://cdn.jsdelivr.net/npm/[email protected]/iconfont/material-icons.min.css: {}