console: Introduce replacement icons as part of icon component

pkg/webui/components/icon/icon.styl

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.icon
+span.icon
   material-icon()
 
   &.small
@@ -21,6 +21,19 @@
   &.large
     font-size: 2rem
 
+svg.icon
+  height: 1.5rem
+  width: 1.5rem
+
+  &.small
+    height: 1rem
+    width: 1rem
+
+  &.large
+    height: 2rem
+    width: 2rem
+
+.icon
   &.nudgeUp
     position: relative
     top: -1px
@@ -32,6 +45,6 @@
 .text-padded
   &-right
     margin-right: $cs.xxs
-  
+
   &-left
     margin-left: $cs.xxs

pkg/webui/components/icon/index.js

@@ -16,6 +16,9 @@ import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 
+import StarIcon from './replacements/star-icon'
+import PlusIcon from './replacements/plus-icon'
+
 import style from './icon.styl'
 
 // A map of hardcoded names to their corresponding icons.
@@ -71,6 +74,11 @@ const hardcoded = {
   valid: 'check_circle',
 }
 
+const replaced = {
+  star: StarIcon,
+  plus: PlusIcon,
+}
+
 const Icon = forwardRef((props, ref) => {
   const {
     icon,
@@ -93,6 +101,12 @@ const Icon = forwardRef((props, ref) => {
     [style.textPaddedRight]: textPaddedRight,
   })
 
+  if (replaced[icon]) {
+    const ReplacedIcon = replaced[icon]
+
+    return <ReplacedIcon className={classname} ref={ref} {...rest} />
+  }
+
   return (
     <span className={classname} ref={ref} {...rest}>
       {hardcoded[icon] || icon}

pkg/webui/components/plus-icon/index.js → pkg/webui/components/icon/replacements/plus-icon.js

@@ -1,4 +1,4 @@
-// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -16,8 +16,14 @@ import React from 'react'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-const PlusIcon = ({ className }) => (
-  <svg fill="none" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" className={className}>
+const PlusIcon = React.forwardRef(({ className }, ref) => (
+  <svg
+    fill="none"
+    viewBox="0 0 21 21"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    ref={ref}
+  >
     <mask
       id="a"
       x="0"
@@ -36,7 +42,7 @@ const PlusIcon = ({ className }) => (
       />
     </g>
   </svg>
-)
+))
 
 PlusIcon.propTypes = {
   className: PropTypes.string,

pkg/webui/components/star-icon/index.js → pkg/webui/components/icon/replacements/star-icon.js

@@ -1,4 +1,4 @@
-// Copyright © 2019 The Things Network Foundation, The Things Industries B.V.
+// Copyright © 2024 The Things Network Foundation, The Things Industries B.V.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -16,8 +16,14 @@ import React from 'react'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
-const StarIcon = ({ className }) => (
-  <svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" className={className}>
+const StarIcon = React.forwardRef(({ className }, ref) => (
+  <svg
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    ref={ref}
+  >
     <mask
       id="a"
       x="0"
@@ -36,7 +42,7 @@ const StarIcon = ({ className }) => (
       />
     </g>
   </svg>
-)
+))
 
 StarIcon.propTypes = {
   className: PropTypes.string,

pkg/webui/components/panel/index.js

@@ -30,7 +30,6 @@ const Panel = ({
   children,
   title,
   icon,
-  svgIcon,
   toggleOptions,
   activeToggle,
   onToggleClick,
@@ -44,7 +43,6 @@ const Panel = ({
     <div className="d-flex j-between al-center mb-cs-m">
       <div className="d-flex gap-cs-xs al-center">
         {icon && <Icon icon={icon} className={styles.panelHeaderIcon} />}
-        {svgIcon}
         <Message content={title} className={styles.panelHeaderTitle} />
         {messageDecorators}
       </div>
@@ -71,7 +69,6 @@ Panel.propTypes = {
   messageDecorators: PropTypes.node,
   onToggleClick: PropTypes.func,
   path: PropTypes.string.isRequired,
-  svgIcon: PropTypes.node,
   title: PropTypes.message.isRequired,
   toggleOptions: PropTypes.arrayOf(PropTypes.shape({})),
 }

pkg/webui/components/panel/panel.styl

@@ -26,14 +26,6 @@
       font-size: $fsv2.l
       line-height: 1
 
-  svg
-    width: 21px
-    height: 21px
-    background-color: var(--c-bg-brand-extralight)
-    padding: $cs.xs
-    border-radius: $br.l
-    color: var(--c-bg-brand-normal)
-
   a.button
     font-weight: $fwv2.semibold
     text-decoration: none transparent
@@ -52,7 +44,7 @@
     margin-bottom: $cs.l
     height: 0px
 
-span.panel-header-icon
+.panel-header-icon
   font-size: 1.5rem
   background-color: var(--c-bg-brand-extralight)
   padding: $cs.xs

pkg/webui/components/panel/story.js

@@ -16,8 +16,6 @@ import React from 'react'
 
 import loginVisual from '@assets/img/layout/bg/login-visual.jpg'
 
-import StarIcon from '@ttn-lw/components/star-icon'
-
 import NewsItem from '../news-panel/news-item'
 
 import Panel from '.'
@@ -73,7 +71,7 @@ export const WithToggle = () => {
 
   return (
     <div style={{ width: '32.5rem' }}>
-      <Example title="Your top entities" svgIcon={<StarIcon />} toggleOptions={options} />
+      <Example title="Your top entities" icon="star" toggleOptions={options} />
     </div>
   )
 }