Icon exploration v2

hds-carbon-icon-map.json

@@ -0,0 +1,307 @@
+{
+  "accessibility": "accessibility--alt",
+  "activity": "activity",
+  "alert-circle": "warning",
+  "alert-circle-fill": "warning--filled",
+  "alert-diamond": "warning--diamond",
+  "alert-octagon": "warning--hex",
+  "alert-octagon-fill": "warning--hex--filled",
+  "alert-triangle": "warning--alt",
+  "alert-triangle-fill": "warning--alt--filled",
+  "align-center": "text--align--center",
+  "align-justify": "text--align--justify",
+  "align-left": "text--align--left",
+  "align-right": "text--align--right",
+  "api": "api",
+  "archive": "box",
+  "arrow-down": "arrow--down",
+  "arrow-down-circle": "previous--outline",
+  "arrow-down-left": "arrow--down-left",
+  "arrow-down-right": "arrow--down-right",
+  "arrow-left": "arrow--left",
+  "arrow-left-circle": "next--outline",
+  "arrow-right": "arrow--right",
+  "arrow-up": "arrow--up",
+  "arrow-up-left": "arrow--up-left",
+  "arrow-up-right": "arrow--up-right",
+  "at-sign": "at",
+  "award": "recommend",
+  "bar-chart": "chart--column",
+  "bar-chart-alt": "chart--column",
+  "battery": "battery--empty",
+  "battery-charging": "battery--charging",
+  "beaker": "chemistry",
+  "bell": "notification",
+  "bell-active": "notification--new",
+  "bell-off": "notification--off",
+  "bookmark": "bookmark",
+  "bookmark-add": "bookmark--add",
+  "bookmark-fill": "bookmark--filled",
+  "bottom": "down-to-bottom",
+  "box": "cube",
+  "briefcase": "portfolio",
+  "bucket": "container--image",
+  "bug": "debug",
+  "build": "tools",
+  "bulb": "idea",
+  "calendar": "calendar",
+  "camera": "camera",
+  "caret": "chevron--sort",
+  "cast": "media-cast",
+  "certificate": "policy",
+  "channel": "network--2",
+  "check": "checkmark",
+  "check-circle-fill": "checkmark--filled",
+  "check-square": "checkbox--checked",
+  "check-square-fill": "checkbox--checked--filled",
+  "chevron-down": "chevron--down",
+  "chevron-left": "chevron--left",
+  "chevron-right": "chevron--right",
+  "chevron-up": "chevron--up",
+  "circle": "circle--outline",
+  "circle-dot": "circle--filled",
+  "circle-fill": "circle--solid",
+  "circle-half": "contrast",
+  "clipboard": "report",
+  "clipboard-checked": "task--complete",
+  "clipboard-x": "task--remove",
+  "clock": "time",
+  "clock-filled": "time--filled",
+  "closed-caption": "closed-caption",
+  "cloud": "cloud",
+  "cloud-download": "cloud--download",
+  "cloud-lock": "virtual-private-cloud",
+  "cloud-off": "cloud--offline",
+  "cloud-upload": "cloud--upload",
+  "code": "code",
+  "collections": "document--multiple-02",
+  "command": "mac--command",
+  "compass": "explore",
+  "connection-gateway": "network--4",
+  "cpu": "chip",
+  "credit-card": "purchase",
+  "crop": "crop",
+  "crosshair": "center--circle",
+  "dashboard": "dashboard",
+  "database": "data--base",
+  "delete": "delete",
+  "diamond": "diamond--outline",
+  "disc": "recording",
+  "discussion-circle": "forum",
+  "discussion-square": "forum",
+  "docs": "document",
+  "docs-download": "document--download",
+  "dollar-sign": "currency--dollar",
+  "dot": "dot-mark",
+  "download": "download",
+  "droplet": "rain-drop",
+  "duplicate": "copy",
+  "edit": "edit",
+  "end": "page--last",
+  "enterprise": "enterprise",
+  "entry-point": "port--input",
+  "event": "event",
+  "exit-point": "port--output",
+  "external-link": "launch",
+  "eye": "view",
+  "eye-off": "view--off",
+  "file": "document--blank",
+  "file-check": "document--tasks",
+  "file-minus": "document--subtract",
+  "file-plus": "document--add",
+  "file-source": "script",
+  "file-text": "document",
+  "files": "document--multiple-02",
+  "filter": "filter",
+  "filter-circle": "filter",
+  "filter-fill": "filter",
+  "fingerprint": "fingerprint-recognition",
+  "flag": "flag",
+  "folder": "folder",
+  "folder-plus": "folder--add",
+  "folder-users": "folder--shared",
+  "gateway": "gateway",
+  "gift": "gift",
+  "git-branch": "branch",
+  "git-commit": "commit",
+  "git-merge": "merge",
+  "git-pull-request": "pull-request",
+  "globe": "wikis",
+  "government": "finance",
+  "grid": "grid",
+  "grid-alt": "thumbnail--2",
+  "guide": "book",
+  "handshake": "partnership",
+  "hard-drive": "vmdk-disk",
+  "hash": "hashtag",
+  "headphones": "headphones",
+  "heart": "favorite",
+  "heart-fill": "favorite--filled",
+  "help": "help",
+  "hexagon": "hexagon--outline",
+  "hexagon-fill": "hexagon--solid",
+  "history": "recently-viewed",
+  "home": "tools",
+  "hourglass": "hourglass",
+  "identity-service": "service-id",
+  "identity-user": "identification",
+  "image": "image",
+  "info": "information",
+  "info-fill": "information--filled",
+  "jump-link": "jump-link",
+  "key": "password",
+  "layers": "layers",
+  "layout": "template",
+  "learn": "education",
+  "line-chart": "chart--line",
+  "line-chart-up": "chart--line",
+  "link": "link",
+  "list": "list",
+  "load-balancer": "load-balancer--classic",
+  "lock": "locked",
+  "logs": "cloud--logging",
+  "mail": "email",
+  "map": "map",
+  "map-pin": "location",
+  "maximize": "maximize",
+  "maximize-alt": "maximize",
+  "meh": "face--neutral",
+  "menu": "menu",
+  "mesh": "model",
+  "message-circle": "chat",
+  "message-circle-fill": "chat",
+  "message-square": "chat",
+  "message-square-fill": "chat",
+  "mic": "microphone",
+  "mic-off": "microphone--off",
+  "migrate": "migrate--alt",
+  "minimize": "minimize",
+  "minimize-alt": "minimize",
+  "minus": "subtract",
+  "minus-circle": "subtract--alt",
+  "minus-circle-fill": "subtract--filled",
+  "monitor": "screen",
+  "moon": "moon",
+  "more-horizontal": "overflow-menu--horizontal",
+  "more-vertical": "overflow-menu--vertical",
+  "mouse-pointer": "cursor--1",
+  "move": "move",
+  "music": "music",
+  "navigation": "location--current",
+  "navigation-alt": "location--current",
+  "network": "vlan",
+  "network-alt": "network--3",
+  "newspaper": "blog",
+  "octagon": "stop-sign",
+  "org": "building",
+  "outline": "assignment-action--usage",
+  "paperclip": "attachment",
+  "pause": "pause",
+  "pen-tool": "pen--fountain",
+  "pencil-tool": "edit",
+  "phone": "phone",
+  "phone-call": "phone--voice",
+  "phone-off": "phone--off",
+  "pie-chart": "chart--pie",
+  "pin": "pin",
+  "pipeline": "pipelines",
+  "play": "play",
+  "play-circle": "play--outline",
+  "plug": "plug",
+  "plus": "add",
+  "plus-circle": "add--alt",
+  "plus-circle-fill": "add--filled",
+  "power": "power",
+  "printer": "printer",
+  "radio": "connection-signal",
+  "reload": "restart",
+  "repeat": "repeat",
+  "replication-direct": "replicate",
+  "robot": "bot",
+  "rocket": "rocket",
+  "rotate-ccw": "rotate",
+  "rss": "rss",
+  "save": "save",
+  "scissors": "cut",
+  "search": "search",
+  "server": "bare-metal-server",
+  "settings": "settings",
+  "share": "share",
+  "shield": "rule",
+  "shield-check": "security",
+  "shield-off": "rule--cancelled",
+  "shopping-bag": "shopping--bag",
+  "shopping-cart": "shopping--cart",
+  "shuffle": "shuffle",
+  "sidebar": "open-panel--left",
+  "sidebar-hide": "side-panel--close",
+  "sidebar-show": "side-panel--open",
+  "sign-in": "login",
+  "sign-out": "logout",
+  "skip": "error",
+  "skip-back": "skip--back",
+  "skip-forward": "skip--forward",
+  "slash": "marginal",
+  "sliders": "audio-console",
+  "smartphone": "mobile",
+  "smile": "face--satisfied",
+  "sort-asc": "sort--ascending",
+  "sort-desc": "sort--descending",
+  "sparkle": "ai-label",
+  "square": "square--outline",
+  "square-fill": "square--solid",
+  "star": "star",
+  "star-fill": "star--filled",
+  "start": "page--first",
+  "stop-circle": "stop--outline",
+  "sun": "sun",
+  "support": "lifesaver",
+  "swap-horizontal": "arrows--horizontal",
+  "swap-vertical": "arrows--vertical",
+  "switcher": "switcher",
+  "sync-alert": "async",
+  "sync-reverse": "renew",
+  "tablet": "tablet--landscape",
+  "tag": "tag",
+  "target": "navaid--military",
+  "terminal": "terminal",
+  "terminal-screen": "terminal",
+  "thumbs-down": "thumbs-down",
+  "thumbs-up": "thumbs-up",
+  "tools": "tool-box",
+  "top": "up-to-top",
+  "transform-data": "character-patterns",
+  "trash": "trash-can",
+  "trend-up": "growth",
+  "triangle": "triangle--outline",
+  "triangle-fill": "triangle--solid",
+  "truck": "delivery-truck",
+  "tv": "screen",
+  "type": "text--scale",
+  "unlock": "unlocked",
+  "upload": "upload",
+  "user": "user",
+  "user-check": "user--admin",
+  "user-circle": "user--avatar",
+  "user-circle-fill": "user--avatar--filled",
+  "user-plus": "user--follow",
+  "users": "user--multiple",
+  "video": "video",
+  "video-off": "video--off",
+  "volume-2": "volume--up",
+  "volume-down": "volume--down",
+  "volume-x": "volume--mute",
+  "wand": "magic-wand",
+  "watch": "watch",
+  "webhook": "webhook",
+  "wifi": "wifi",
+  "wifi-off": "wifi--off",
+  "wrench": "tools",
+  "x": "close",
+  "x-circle": "close--outline",
+  "x-circle-fill": "close--filled",
+  "zap": "flash",
+  "zap-off": "flash--off",
+  "zoom-in": "zoom--in",
+  "zoom-out": "zoom--out"
+}

packages/components/package.json

@@ -384,6 +384,7 @@
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
+      "./services/hds-carbon.js": "./dist/_app_/services/hds-carbon.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
     }

packages/components/src/components/hds/icon/index.hbs

@@ -8,21 +8,24 @@
   ...attributes
   aria-hidden="{{if @title 'false' 'true'}}"
   aria-labelledby={{this.ariaLabelledby}}
-  data-test-icon={{@name}}
+  data-test-icon={{this.name}}
   fill="{{this.fillColor}}"
   id={{this._iconId}}
   role={{this.role}}
   width="{{this.svgSize.width}}"
   height="{{this.svgSize.height}}"
-  viewBox="0 0 {{this.size}} {{this.size}}"
+  viewBox={{this.viewBox}}
   xmlns="http://www.w3.org/2000/svg"
+  {{this.loadIconModule name=this.name size=this.size carbonModeEnabled=this.hdsCarbon.carbonModeEnabled}}
 >
+  {{this.svgSymbol}}
+
   {{#if @title}}
     <title id={{this._titleId}}>{{@title}}</title>
     <g role="presentation">
-      <use href="#flight-{{@name}}-{{this.size}}"></use>
+      <use href="#{{this.uniqueSymbolId}}"></use>
     </g>
   {{else}}
-    <use href="#flight-{{@name}}-{{this.size}}"></use>
+    <use href="#{{this.uniqueSymbolId}}"></use>
   {{/if}}
 </svg>