Create custom handler for codepoints

modules/ui_icons_library/src/Controller/IconsetsController.php

@@ -1,6 +1,5 @@
 <?php
 
-
 namespace Drupal\ui_icons_library\Controller;
 
 use Drupal\Core\Controller\ControllerBase;
@@ -9,8 +8,7 @@
 /**
  * Class IconDisplayController.
  */
-class IconsetsController extends ControllerBase
-{
+class IconsetsController extends ControllerBase {
 
   const OVERVIEW_SLICE = 20;
 
@@ -20,20 +18,20 @@ class IconsetsController extends ControllerBase
    * @return array
    *   Return render array.
    */
-  public function overview()
-  {
+  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 = array_slice($icons, 0, static::OVERVIEW_SLICE);
+      $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 as $icon_id => $icon) {
+      foreach ($icons_id as $icon_id) {
         $build[] = $iconset->build($icon_id);
       }
       $build[] = [
@@ -43,27 +41,25 @@ public function overview()
           '#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)
-  {
+  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);
-      }
+      $build[] = $iconset->build($icon_id);
+    }
     return $build;
   }
 

modules/ui_icons_library/tests/modules/ui_icons_test/ui_icons_test.iconset.yml

@@ -26,6 +26,11 @@ uswsd:
     - '/libraries/uswds/packages/usa-icon/src/img/usa-icons-bg'
     - '/libraries/uswds/packages/usa-icon/src/img/uswds-icons'
 
+material_icons:
+  label: 'Material icons'
+  plugin: 'codepoints'
+  assets:
+    - 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.codepoints'
 
 
 

modules/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: {}

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,80 @@
+<?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 {
+
+  /**
+   * URL to the codepoints file.
+   */
+  const CODEPOINTS_URL = 'https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.codepoints';
+
+  /**
+   * {@inheritdoc}
+   */
+  public function createAssets($asset_info, IconsetInterface $iconset) {
+    // @todo get url from $asset_info,
+    return new CodepointsAsset(static::CODEPOINTS_URL);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function supports(IconsetInterface $iconset) {
+    // Check if the iconset supports this handler.
+    return $iconset->getType() === 'codepoints';
+  }
+
+  /**
+   *
+   */
+  public function build($icon_id, AssetInterface $iconset, array $options = []) {
+    // @todo don't hardcode this here
+    return [
+      "#type" => "html_tag",
+      "#tag" => "span",
+      "#value" => $icon_id,
+      "#attributes" => [
+        "class" => [
+          "material-icons-outlined",
+        ],
+      ],
+      "#attached" => [
+        "library" => [
+          "ui_icons_test/material",
+        ],
+      ],
+    ];
+  }
+
+  /**
+   *
+   */
+  public function getJsSettings() {
+    // @todo Implement getJsSettings() method.
+    return [];
+  }
+
+  /**
+   *
+   */
+  public function formatJson(AssetInterface $asset) {
+    // @todo Implement formatJson() method.
+    return [];
+  }
+
+}