minerva-design 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # minerva-design
 
+## 1.11.0
+
+### Minor Changes
+
+- b50696a: Icons: the set grows from 202 to 499 original icons in 23 categories (weather, nature, food, people, places, shapes, text, education, health, shopping, music, tools and sports are new), and some icons are drawn in colour. `IconDefinition` gets an optional `colors` array (one color per path, `undefined` keeps the drawing color), honored by the React, Vue, Angular and Web Components icons, `toSvg`, `drawIcon`, `IconCanvas` and the canvas icons. Colors apply to strokes only. The icons gallery shows the whole set on the page, with no nested scroll box. The home page hero buttons get a background.
+
 ## 1.10.0
 
 ### Minor Changes

package/README.md

@@ -300,7 +300,7 @@ helpers are published as `minerva-design/styling-hooks`.
 | `minerva-design/monaco`                                               | `MonacoCodeEditor` (optional peers `@monaco-editor/react` and `monaco-editor`)                                                                                                                                                                                                                                     |
 | `minerva-design/charts`                                               | GPU charts (WebGPU → WebGL2 → WebGL → Canvas2D): 2D, statistics, hierarchies and flows, relationship graphs (networks, DAGs, trees, chords), trading with 21 indicators, order books and 3D (`"use client"`)                                                                                                       |
 | `minerva-design/charts/core`                                          | The framework-free chart engines: `createChart`, `createShapeChart`, `createTradingChart`, `createDepthChart` / `createOrderBook` / `createOrderBookHeatmap` / `createTimeAndSales`, `createChart3D`, `createGraphChart`, plus `setDefaultChartRenderer` and `formatCompact` (server-safe import, no dependencies) |
-| `minerva-design/icons`                                                | 202 original icons: one component per icon (`SearchIcon`…), `Icon` (inline SVG, or a canvas with `renderer`), `IconCanvas` (thousands of icons in a few GPU draws), `createIcon`, `DynamicIcon` (`"use client"`)                                                                                                   |
+| `minerva-design/icons`                                                | 499 original icons (some with colors): one component per icon (`SearchIcon`…), `Icon` (inline SVG, or a canvas with `renderer`), `IconCanvas` (thousands of icons in a few GPU draws), `createIcon`, `DynamicIcon` (`"use client"`)                                                                                |
 | `minerva-design/icons/core`                                           | The framework-free icon set: icon data (`searchIcon`…), `toSvg`, `drawIcon`, `createIconCanvas`, `defineIcon`, `setDefaultIconRenderer` (server-safe import, no dependencies)                                                                                                                                      |
 | `minerva-design/vue/icons`                                            | The icons for Vue 3: `Icon`, `IconCanvas`, `DynamicIcon`, `createIcon`, one component per icon and the opt-in `MinervaVueIcons` plugin (typings: `minerva-design/vue/icons-global`); Angular has `MnIcon`, `MnIconCanvas` and `MnDynamicIcon` in `minerva-design/angular`                                          |
 | `minerva-design/web-components/icon`                                  | Optional: `<minerva-icon>` and `<minerva-icon-canvas>` (they load the icon set); not in the all-in-one / CDN                                                                                                                                                                                                       |

package/dist/angular/fesm2022/minerva-angular.mjs

@@ -40102,9 +40102,10 @@ const ICON_TEMPLATE = `
         @if (title()) {
           <title>{{ title() }}</title>
         }
-        @for (d of icon.paths; track $index) {
+        @for (d of icon.paths; track $index; let i = $index) {
           <path
             [attr.d]="d"
+            [attr.stroke]="icon.colors?.[i] ?? null"
             [attr.vector-effect]="
               absoluteStrokeWidth() ? 'non-scaling-stroke' : null
             "
@@ -40439,7 +40440,7 @@ var MnIcon = class MnIcon extends MnIconBase {
 			} },
 			usesInheritance: true,
 			ngImport: i0,
-			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
+			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index; let i = $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.stroke]=\"icon.colors?.[i] ?? null\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
 			isInline: true,
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
@@ -40499,7 +40500,7 @@ var MnDynamicIcon = class MnDynamicIcon extends MnIconBase {
 			} },
 			usesInheritance: true,
 			ngImport: i0,
-			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
+			template: "\n  @if (definition(); as icon) {\n    @if (renderer() === \"svg\") {\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        [attr.stroke]=\"color()\"\n        [attr.stroke-width]=\"strokeWidth()\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [attr.data-icon]=\"icon.name\"\n        class=\"minerva-icon\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n      >\n        @if (title()) {\n          <title>{{ title() }}</title>\n        }\n        @for (d of icon.paths; track $index; let i = $index) {\n          <path\n            [attr.d]=\"d\"\n            [attr.stroke]=\"icon.colors?.[i] ?? null\"\n            [attr.vector-effect]=\"\n              absoluteStrokeWidth() ? 'non-scaling-stroke' : null\n            \"\n          />\n        }\n      </svg>\n    } @else {\n      <canvas\n        #canvas\n        class=\"minerva-icon\"\n        [attr.data-icon]=\"icon.name\"\n        [attr.role]=\"labelled() ? 'img' : null\"\n        [attr.aria-hidden]=\"labelled() ? null : 'true'\"\n        [attr.aria-label]=\"title() || ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n        [style.display]=\"'inline-block'\"\n        [style.vertical-align]=\"'middle'\"\n        [style.width]=\"cssSize()\"\n        [style.height]=\"cssSize()\"\n      ></canvas>\n    }\n  }\n",
 			isInline: true,
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});