[minor][16.25.0] Add Inbount/Outbound Icons (#147)

Author: inescri

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.24.0",
+    "version": "16.25.0",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.24.0",
+    "version": "16.25.0",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

packages/design-system/package.json

@@ -22,7 +22,7 @@ export enum ToniqTopTabVariantEnum {
 export type ToniqTopTab = Readonly<{
     label: string;
     value: Primitive;
-    icon?: ToniqSvg;
+    icon?: ToniqSvg | undefined;
     /** Set this to treat the tab as a router link. */
     link?: {
         route: FullRoute;

packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts

@@ -50,6 +50,7 @@ import {Geometry24Icon} from './svgs/core-24/geometry-24.icon';
 import {Gift24Icon} from './svgs/core-24/gift-24.icon';
 import {GridDots24Icon} from './svgs/core-24/grid-dots-24.icon';
 import {Heart24Icon} from './svgs/core-24/heart-24.icon';
+import {Inbound24Icon} from './svgs/core-24/inbound-24.icon';
 import {Infinity24Icon} from './svgs/core-24/infinity-24.icon';
 import {Info24Icon} from './svgs/core-24/info-24.icon';
 import {LayersLinked24Icon} from './svgs/core-24/layers-linked-24.icon';
@@ -64,6 +65,7 @@ import {LoaderAnimated24Icon} from './svgs/core-24/loader-animated-24.icon';
 import {Lock24Icon} from './svgs/core-24/lock-24.icon';
 import {LockOpen24Icon} from './svgs/core-24/lock-open-24.icon';
 import {Menu24Icon} from './svgs/core-24/menu-24.icon';
+import {Outbound24Icon} from './svgs/core-24/outbound-24.icon';
 import {Pamphlet24Icon} from './svgs/core-24/pamphlet-24.icon';
 import {Paper24Icon} from './svgs/core-24/paper-24.icon';
 import {People24Icon} from './svgs/core-24/people-24.icon';
@@ -189,6 +191,7 @@ export * from './svgs/core-24/geometry-24.icon';
 export * from './svgs/core-24/gift-24.icon';
 export * from './svgs/core-24/grid-dots-24.icon';
 export * from './svgs/core-24/heart-24.icon';
+export * from './svgs/core-24/inbound-24.icon';
 export * from './svgs/core-24/infinity-24.icon';
 export * from './svgs/core-24/info-24.icon';
 export * from './svgs/core-24/layers-linked-24.icon';
@@ -203,6 +206,7 @@ export * from './svgs/core-24/loader-animated-24.icon';
 export * from './svgs/core-24/lock-24.icon';
 export * from './svgs/core-24/lock-open-24.icon';
 export * from './svgs/core-24/menu-24.icon';
+export * from './svgs/core-24/outbound-24.icon';
 export * from './svgs/core-24/pamphlet-24.icon';
 export * from './svgs/core-24/paper-24.icon';
 export * from './svgs/core-24/people-24.icon';
@@ -334,6 +338,7 @@ export const allIconsByCategory = {
         Gift24Icon,
         GridDots24Icon,
         Heart24Icon,
+        Inbound24Icon,
         Infinity24Icon,
         Info24Icon,
         LayersLinked24Icon,
@@ -348,6 +353,7 @@ export const allIconsByCategory = {
         Lock24Icon,
         LockOpen24Icon,
         Menu24Icon,
+        Outbound24Icon,
         Pamphlet24Icon,
         Paper24Icon,
         People24Icon,

packages/design-system/src/icons/index.ts

@@ -0,0 +1,24 @@
+import {html} from 'element-vir';
+import {defineIcon} from 'vira';
+import {toniqIconCssVars} from '../../../styles';
+
+export const Inbound24Icon = defineIcon({
+    name: 'Inbound24',
+    svgTemplate: html`
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill=${toniqIconCssVars['toniq-icon-fill-color'].value}
+            stroke=${toniqIconCssVars['toniq-icon-stroke-color'].value}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="24"
+            height="24"
+            stroke-width="2"
+            transform="rotate(90)"
+        >
+            <path d="M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0m6 3 6-6" />
+            <path d="M11 9h4v4" />
+        </svg>
+    `,
+});

packages/design-system/src/icons/svgs/core-24/inbound-24.icon.ts

@@ -0,0 +1,23 @@
+import {html} from 'element-vir';
+import {defineIcon} from 'vira';
+import {toniqIconCssVars} from '../../../styles';
+
+export const Outbound24Icon = defineIcon({
+    name: 'Outbound24',
+    svgTemplate: html`
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill=${toniqIconCssVars['toniq-icon-fill-color'].value}
+            stroke=${toniqIconCssVars['toniq-icon-stroke-color'].value}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="24"
+            height="24"
+            stroke-width="2"
+        >
+            <path d="M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0m6 3 6-6" />
+            <path d="M11 9h4v4" />
+        </svg>
+    `,
+});

packages/design-system/src/icons/svgs/core-24/outbound-24.icon.ts

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.24.0",
+    "version": "16.25.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

packages/native-elements-test/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.24.0",
+    "version": "16.25.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",