feat(plasma-icons): Add other icons for 24 dp and 16 dp

examples/demo-canvas-app/pages/index.tsx

@@ -12,6 +12,7 @@ const menu = [
     { href: '/test/components/tabs/', title: 'Tabs' },
     { href: '/test/components/text-field/', title: 'TextField' },
     { href: '/test/components/toast/', title: 'Toast' },
+    { href: '/test/components/icons/', title: 'Icons' },
 ];
 
 const StyledCard = styled.a`

examples/demo-canvas-app/pages/test/components/icons.tsx

@@ -0,0 +1,31 @@
+import { iconSet16, iconSet24, iconSet36, IconRootScalable } from '@sberdevices/plasma-icons';
+import { IconSetUnionSize } from '@sberdevices/plasma-icons/scalable/IconRoot';
+import { ParagraphText1 } from '@sberdevices/plasma-ui';
+
+export default function IconsPage() {
+    const iconSets = {
+        ...iconSet16,
+        ...iconSet24,
+        ...iconSet36,
+    };
+
+    return (
+        <>
+            {Object.keys(iconSets).map((iconName) => (
+                <div key={iconName} style={{ display: 'flex', alignItems: 'center' }}>
+                    <IconRootScalable size="s" iconName={iconName as IconSetUnionSize} color="inherit" />
+                    <ParagraphText1> - {iconName}</ParagraphText1>
+                </div>
+            ))}
+        </>
+    );
+}
+
+export function getStaticProps() {
+    return {
+        props: {
+            title: 'Icons',
+            back: true,
+        },
+    };
+}

packages/plasma-icons/src/index.ts

@@ -170,3 +170,8 @@ export type { IconProps, IconSize } from './IconRoot';
 
 export { Icon, iconSectionsSet } from './Icon';
 export type { IconName } from './Icon';
+
+export { iconSet16 } from './scalable/Icon.assets.16';
+export { iconSet24 } from './scalable/Icon.assets.24';
+export { iconSet36 } from './scalable/Icon.assets.36';
+export { IconRoot as IconRootScalable } from './scalable';

packages/plasma-icons/src/scalable/Icon.assets.16/Battery100.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Battery100: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="6" y="5" width="4" height="7" rx="0.5" fill="currentColor" />
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Battery20.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Battery20: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+        <rect x="6" y="10" width="4" height="2" rx="0.5" fill="currentColor" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Battery40.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Battery40: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+        <rect x="6" y="9" width="4" height="3" rx="0.5" fill="currentColor" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Battery60.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Battery60: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+        <rect x="6" y="8" width="4" height="4" rx="0.5" fill="currentColor" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Battery80.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Battery80: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+        <rect x="6" y="7" width="4" height="5" rx="0.5" fill="currentColor" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/BatteryCharge.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const BatteryCharge: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.2081 9.02227C6.03914 9.02227 5.94085 8.73291 6.03906 8.5973L8.36022 5.97514C8.48576 5.80179 8.76283 5.90906 8.7353 6.12034L8.13469 7.80923H9.79668C9.96565 7.80923 10.058 8.09878 9.95983 8.23439L7.60597 10.8566C7.48044 11.0299 7.20338 10.9227 7.23089 10.7114L7.8506 9.02227H6.2081Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/BatteryEmpty.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const BatteryEmpty: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M4 3H6V2H10V3H12V14H4V3Z" stroke="white" strokeOpacity="0.96" strokeWidth="2" strokeLinejoin="round" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/DoorClosed.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const DoorClosed: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <ellipse cx="9" cy="8.33301" rx="1" ry="1" fill="currentColor" />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 2C3 1.44772 3.44772 1 4 1H12C12.5523 1 13 1.44772 13 2V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V2ZM5 3V13H11V3H5Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/DoorOpen.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const DoorOpen: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 1C3.75029 1 3.52195 1.09153 3.34671 1.24287C3.31037 1.27422 3.27653 1.30799 3.24534 1.34386C3.09253 1.51947 3 1.74893 3 2V13C3 13.3788 3.214 13.725 3.55279 13.8944L7.55279 15.8944C7.86277 16.0494 8.23091 16.0329 8.52573 15.8507C8.82055 15.6684 9 15.3466 9 15V4C9 3.62123 8.786 3.27497 8.44721 3.10557L8.23607 3H11V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V2C13 1.44772 12.5523 1 12 1H4.00012H4ZM5 3.61804V12.382L7 13.382V10C6.44772 10 6 9.55229 6 9C6 8.44772 6.44772 8 7 8V4.61804L5 3.61804Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Flood.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Flood: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M11.3332 6.4902C11.3332 8.36724 9.84079 9.88889 7.99984 9.88889C6.15889 9.88889 4.6665 8.36724 4.6665 6.4902C4.6665 4.13725 7.99984 1 7.99984 1C7.99984 1 11.3332 4.13725 11.3332 6.4902Z"
+            fill="currentColor"
+        />
+        <path
+            d="M2.5 13.75L4 12.75L4.43826 13.2978C5.23891 14.2986 6.76109 14.2986 7.56174 13.2978L8 12.75L8.43826 13.2978C9.23891 14.2986 10.7611 14.2986 11.5617 13.2978L12 12.75L13.5 13.75"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Humidity.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Humidity: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M12.5 9.22059C12.5 11.8602 10.4853 14 8 14C5.51472 14 3.5 11.8602 3.5 9.22059C3.5 5.91176 8 1.5 8 1.5C8 1.5 12.5 5.91176 12.5 9.22059Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Motion.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Motion: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8 5C8 4.44772 8.44772 4 9 4H12C12.5523 4 13 4.44772 13 5C13 5.55228 12.5523 6 12 6H9C8.44772 6 8 5.55228 8 5ZM2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9H12C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7H2ZM10 11C10 10.4477 10.4477 10 11 10H12C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12H11C10.4477 12 10 11.5523 10 11ZM5 10C4.44772 10 4 10.4477 4 11C4 11.5523 4.44772 12 5 12H8C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10H5ZM6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Smoke.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Smoke: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M9.6 1.20006C10.0418 1.53143 10.1314 2.15823 9.8 2.60006L8.49705 4.33732C7.82188 5.23755 7.91141 6.49725 8.7071 7.29295C10.2066 8.79244 10.3753 11.1663 9.10294 12.8628L7.8 14.6001C7.46863 15.0419 6.84183 15.1314 6.4 14.8001C5.95817 14.4687 5.86863 13.8419 6.2 13.4001L7.50294 11.6628C8.17812 10.7626 8.08859 9.50286 7.29289 8.70717C5.79341 7.20768 5.6247 4.83379 6.89705 3.13732L8.2 1.40006C8.53137 0.958231 9.15817 0.868688 9.6 1.20006Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4.04076 4.15894C4.50533 4.4576 4.63983 5.07631 4.34118 5.54088L3.6721 6.58167C3.41791 6.97707 3.45334 7.49243 3.75926 7.84933C4.64026 8.87717 4.7423 10.3614 4.01026 11.5001L3.34118 12.5409C3.04253 13.0054 2.42381 13.14 1.95924 12.8413C1.49467 12.5426 1.36017 11.9239 1.65882 11.4594L2.3279 10.4186C2.58209 10.0232 2.54666 9.50781 2.24074 9.15091C1.35974 8.12308 1.2577 6.63889 1.98974 5.50015L2.65882 4.45936C2.95747 3.99479 3.57619 3.86029 4.04076 4.15894Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M14.0408 4.15894C14.5053 4.4576 14.6398 5.07631 14.3412 5.54088L13.6721 6.58167C13.4179 6.97707 13.4533 7.49243 13.7593 7.84933C14.6403 8.87717 14.7423 10.3614 14.0103 11.5001L13.3412 12.5409C13.0425 13.0054 12.4238 13.14 11.9592 12.8413C11.4947 12.5426 11.3602 11.9239 11.6588 11.4594L12.3279 10.4186C12.5821 10.0232 12.5467 9.50781 12.2407 9.15091C11.3597 8.12308 11.2577 6.63889 11.9897 5.50015L12.6588 4.45936C12.9575 3.99479 13.5762 3.86029 14.0408 4.15894Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/Temperature.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Temperature: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2 2C2 1.44772 2.44772 1 3 1H4H12H13C13.5523 1 14 1.44772 14 2C14 2.55228 13.5523 3 13 3H12V11C12 13.2091 10.2091 15 8 15C5.79086 15 4 13.2091 4 11V3H3C2.44772 3 2 2.55228 2 2ZM6 3H10V11C10 12.1046 9.10457 13 8 13C6.89543 13 6 12.1046 6 11V3ZM9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8V11C7 11.5523 7.44772 12 8 12C8.55228 12 9 11.5523 9 11V8Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.16/index.ts

@@ -1,7 +1,35 @@
 import { Video } from './Video';
+import { Temperature } from './Temperature';
+import { Humidity } from './Humidity';
+import { Motion } from './Motion';
+import { BatteryCharge } from './BatteryCharge';
+import { Battery100 } from './Battery100';
+import { Battery80 } from './Battery80';
+import { Battery60 } from './Battery60';
+import { Battery40 } from './Battery40';
+import { Battery20 } from './Battery20';
+import { BatteryEmpty } from './BatteryEmpty';
+import { DoorClosed } from './DoorClosed';
+import { DoorOpen } from './DoorOpen';
+import { Smoke } from './Smoke';
+import { Flood } from './Flood';
 
 export const iconSet16 = {
     video: Video,
+    temperature: Temperature,
+    humidity: Humidity,
+    motion: Motion,
+    batteryCharge: BatteryCharge,
+    battery100: Battery100,
+    battery80: Battery80,
+    battery60: Battery60,
+    battery40: Battery40,
+    battery20: Battery20,
+    batteryEmpty: BatteryEmpty,
+    doorClosed: DoorClosed,
+    doorOpen: DoorOpen,
+    smoke: Smoke,
+    flood: Flood,
 };
 
 export type IconSet16 = keyof typeof iconSet16;

packages/plasma-icons/src/scalable/Icon.assets.24/Backward.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Backward: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10.5954 10.9424C9.80153 11.4373 9.80152 12.5627 10.5954 13.0576L19.0023 18.2983C19.8652 18.8362 21 18.2354 21 17.2407V6.75932C21 5.76462 19.8652 5.16384 19.0023 5.70174L10.5954 10.9424Z"
+                fill="currentColor"
+            />
+        </g>
+        <g>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M1.59543 10.9424C0.801525 11.4373 0.801523 12.5627 1.59543 13.0576L10.0023 18.2983C10.8652 18.8362 12 18.2354 12 17.2407V6.75932C12 5.76462 10.8652 5.16384 10.0023 5.70174L1.59543 10.9424Z"
+                fill="currentColor"
+            />
+        </g>
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Cam.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Cam: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.8889 5H20C21.1027 5 22 5.89733 22 7V17C22 18.1027 21.1027 19 20 19H4C2.89733 19 2 18.1027 2 17V7C2 5.89733 2.89733 5 4 5H7.11111C7.42044 5 7.93844 4.78533 8.15711 4.56689L8.9 3.824C9.36978 3.35422 10.2247 3 10.8889 3H13.1111C13.7753 3 14.6302 3.35422 15.0998 3.82378L15.8427 4.56667C16.0616 4.78533 16.5796 5 16.8889 5ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+            fill="currentColor"
+        />
+        <circle cx="12" cy="12" r="3" fill="currentColor" />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Flood.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Flood: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M17 10.2353C17 13.0509 14.7614 15.3333 12 15.3333C9.23858 15.3333 7 13.0509 7 10.2353C7 6.70588 12 2 12 2C12 2 17 6.70588 17 10.2353Z"
+            fill="currentColor"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.55276 18.1056C5.93775 17.9131 6.40272 17.9886 6.70708 18.2929L7.58576 19.1716C8.36681 19.9526 9.63314 19.9526 10.4142 19.1716L11.2929 18.2929C11.6834 17.9024 12.3166 17.9024 12.7071 18.2929L13.5858 19.1716C14.3668 19.9526 15.6331 19.9526 16.4142 19.1716L17.2929 18.2929C17.5972 17.9886 18.0622 17.9131 18.4472 18.1056L20.4472 19.1056C20.9412 19.3526 21.1414 19.9533 20.8944 20.4472C20.6474 20.9412 20.0467 21.1414 19.5528 20.8945L18.1974 20.2168L17.8284 20.5858C16.2663 22.1479 13.7336 22.1479 12.1715 20.5858L12 20.4142L11.8284 20.5858C10.2663 22.1479 7.73364 22.1479 6.17155 20.5858L5.80252 20.2168L4.44719 20.8945C3.95321 21.1414 3.35254 20.9412 3.10555 20.4472C2.85856 19.9533 3.05878 19.3526 3.55276 19.1056L5.55276 18.1056Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Forward.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Forward: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <g>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M13.4046 10.9424C14.1985 11.4373 14.1985 12.5627 13.4046 13.0576L4.99766 18.2983C4.1348 18.8362 3 18.2354 3 17.2407V6.75932C3 5.76462 4.1348 5.16384 4.99766 5.70174L13.4046 10.9424Z"
+                fill="currentColor"
+            />
+        </g>
+        <g>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M22.4046 10.9424C23.1985 11.4373 23.1985 12.5627 22.4046 13.0576L13.9977 18.2983C13.1348 18.8362 12 18.2354 12 17.2407V6.75932C12 5.76462 13.1348 5.16384 13.9977 5.70174L22.4046 10.9424Z"
+                fill="currentColor"
+            />
+        </g>
+    </svg>
+);