feat: export icons

src/components/NavigationTree/NavigationTreeNode.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 
 import {TreeView} from '../TreeView/TreeView';
-import {AsyncReplicationIcon} from '../icons/AsyncReplication';
-import {ColumnTableIcon} from '../icons/ColumnTable';
-import {DatabaseIcon} from '../icons/Database';
-import {ExternalDataSourceIcon} from '../icons/ExternalDataSource';
-import {ExternalTableIcon} from '../icons/ExternalTable';
-import {FolderIcon} from '../icons/Folder';
-import {FolderOpenIcon} from '../icons/FolderOpen';
-import {IndexIcon} from '../icons/Index';
-import {ResourcePoolIcon} from '../icons/ResourcePool';
-import {TableIcon} from '../icons/Table';
-import {TopicIcon} from '../icons/Topic';
-import {TransferIcon} from '../icons/Transfer';
-import {ViewIcon} from '../icons/View';
+import {
+    AsyncReplicationIcon,
+    ColumnTableIcon,
+    DatabaseIcon,
+    ExternalDataSourceIcon,
+    ExternalTableIcon,
+    FolderIcon,
+    FolderOpenIcon,
+    ResourcePoolIcon,
+    TableIcon,
+    TableIndexIcon,
+    TopicIcon,
+    TransferIcon,
+    ViewIcon,
+} from '../icons';
 
 import {NavigationTreeActionType} from './state';
 import type {NavigationTreeAction} from './state';
@@ -37,33 +39,32 @@ export interface NavigationTreeNodeProps {
 function renderIcon(type: NavigationTreeNodeType, collapsed: boolean) {
     switch (type) {
         case 'async_replication':
-            return <AsyncReplicationIcon height={16} />;
+            return <AsyncReplicationIcon />;
         case 'transfer':
-            return <TransferIcon height={16} />;
+            return <TransferIcon />;
         case 'database':
-            // this icon is larger than the others, therefore 14 for a better fit
-            return <DatabaseIcon height={14} />;
+            return <DatabaseIcon />;
         case 'directory':
-            return collapsed ? <FolderIcon height={16} /> : <FolderOpenIcon height={16} />;
+            return collapsed ? <FolderIcon /> : <FolderOpenIcon />;
         case 'index':
-            return <IndexIcon height={16} />;
+            return <TableIndexIcon />;
         case 'table':
         case 'index_table':
         case 'system_table':
-            return <TableIcon height={16} />;
+            return <TableIcon />;
         case 'column_table':
-            return <ColumnTableIcon height={16} />;
+            return <ColumnTableIcon />;
         case 'stream':
         case 'topic':
-            return <TopicIcon height={16} />;
+            return <TopicIcon />;
         case 'external_table':
-            return <ExternalTableIcon height={16} />;
+            return <ExternalTableIcon />;
         case 'external_data_source':
-            return <ExternalDataSourceIcon height={16} />;
+            return <ExternalDataSourceIcon />;
         case 'view':
-            return <ViewIcon height={16} />;
+            return <ViewIcon />;
         case 'resource_pool':
-            return <ResourcePoolIcon height={16} />;
+            return <ResourcePoolIcon />;
         default:
             return null;
     }

src/components/icons/AsyncReplication.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function AsyncReplicationIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/ColumnTable.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function ColumnTableIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/Database.tsx

@@ -4,6 +4,9 @@ export function DatabaseIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
+            // This icon is larger than the others, therefore 14 for a better fit (other have 16)
+            height={14}
+            width={14}
             viewBox="0 0 448 512"
             fill="currentColor"
             {...props}

src/components/icons/ExternalDataSource.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function ExternalDataSourceIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/ExternalTable.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function ExternalTableIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/Folder.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function FolderIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path d="M13.2812 4.875H8.40625L6.78125 3.25H2.71875C2.0332 3.25 1.5 3.80859 1.5 4.46875V11.7812C1.5 12.4668 2.0332 13 2.71875 13H13.2812C13.9414 13 14.5 12.4668 14.5 11.7812V6.09375C14.5 5.43359 13.9414 4.875 13.2812 4.875Z" />
         </svg>
     );

src/components/icons/FolderOpen.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function FolderOpenIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path d="M15.2109 9.06445C15.4648 8.6582 15.1602 8.125 14.6777 8.125H4.54688C4.01367 8.125 3.37891 8.50586 3.125 8.9375L1.29688 12.0859C1.04297 12.4922 1.34766 13 1.83008 13H11.9609C12.4941 13 13.1289 12.6445 13.3828 12.2129L15.2109 9.06445ZM4.54688 7.3125H12.875V6.09375C12.875 5.43359 12.3164 4.875 11.6562 4.875H7.59375L5.96875 3.25H1.90625C1.2207 3.25 0.6875 3.80859 0.6875 4.46875V11.5527L2.43945 8.53125C2.87109 7.79492 3.6582 7.3125 4.54688 7.3125Z" />
         </svg>
     );

src/components/icons/ResourcePool.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function ResourcePoolIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 d="m1.5 3.25c0-0.41421 0.33579-0.75 0.75-0.75h1.0109c0.41421 0 0.75-0.33579 0.75-0.75s-0.33579-0.75-0.75-0.75h-1.0109c-1.2426 0-2.25 1.0074-2.25 2.25v9.5c0 1.2426 1.0074 2.25 2.25 2.25h1.0109c0.41421 0 0.75-0.3358 0.75-0.75s-0.33579-0.75-0.75-0.75h-1.0109c-0.41421 0-0.75-0.3358-0.75-0.75v-9.5zm11.239-2.25c-0.4142 0-0.75 0.33579-0.75 0.75s0.3358 0.75 0.75 0.75h1.0109c0.4142 0 0.75 0.33579 0.75 0.75v9.5c0 0.4142-0.3358 0.75-0.75 0.75h-1.0109c-0.4142 0-0.75 0.3358-0.75 0.75s0.3358 0.75 0.75 0.75h1.0109c1.2426 0 2.25-1.0074 2.25-2.25v-9.5c0-1.2426-1.0074-2.25-2.25-2.25h-1.0109zm-1.4316 6.9054c-0.9374 0.45226-2.1226 0.63619-3.3102 0.63619-1.1876 0-2.3728-0.18393-3.3103-0.63619-0.21174-0.10215-0.42044-0.22399-0.61701-0.36633v0.46091c0 1.3714 1.7583 2.0571 3.9273 2.0571 2.169 0 3.9273-0.68571 3.9273-2.0571v-0.46091c-0.1966 0.14234-0.4053 0.26418-0.6171 0.36633zm-3.3102-0.59108c2.169 0 3.9273-0.68572 3.9273-2.0571 0-1.3714-1.7583-2.0572-3.9273-2.0572-2.169 0-3.9273 0.68572-3.9273 2.0572 0 1.3714 1.7583 2.0571 3.9273 2.0571zm3.9273 3.4286c0 1.3714-1.7583 2.0571-3.9273 2.0571-2.169 0-3.9273-0.6857-3.9273-2.0571v-0.461c0.19657 0.1423 0.40527 0.2641 0.61701 0.3663 0.93748 0.4522 2.1227 0.6362 3.3103 0.6362 1.1876 0 2.3728-0.184 3.3102-0.6362 0.2118-0.1022 0.4205-0.224 0.6171-0.3663v0.461z"
                 fill="currentColor"

src/components/icons/Table.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function TableIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/Index.tsx → src/components/icons/TableIndex.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
 
-export function IndexIcon(props: React.SVGProps<SVGSVGElement>) {
+export function TableIndexIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/Topic.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function TopicIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <rect x="2" y="2.20001" width="9" height="2.5" rx="0.5" />
             <rect x="5" y="6.70001" width="9" height="2.5" rx="0.5" />
             <rect x="2" y="11.2" width="9" height="2.5" rx="0.5" />

src/components/icons/Transfer.tsx

@@ -3,5 +3,5 @@ import React from 'react';
 import {FileArrowRightOut} from '@gravity-ui/icons';
 
 export function TransferIcon(props: React.SVGProps<SVGSVGElement>) {
-    return <FileArrowRightOut {...props} />;
+    return <FileArrowRightOut height={16} width={16} {...props} />;
 }

src/components/icons/View.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 
 export function ViewIcon(props: React.SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" {...props}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height={16}
+            width={16}
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            {...props}
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

src/components/icons/index.ts

@@ -0,0 +1,13 @@
+export {AsyncReplicationIcon} from './AsyncReplication';
+export {ColumnTableIcon} from './ColumnTable';
+export {DatabaseIcon} from './Database';
+export {ExternalDataSourceIcon} from './ExternalDataSource';
+export {ExternalTableIcon} from './ExternalTable';
+export {FolderIcon} from './Folder';
+export {FolderOpenIcon} from './FolderOpen';
+export {ResourcePoolIcon} from './ResourcePool';
+export {TableIcon} from './Table';
+export {TableIndexIcon} from './TableIndex';
+export {TopicIcon} from './Topic';
+export {TransferIcon} from './Transfer';
+export {ViewIcon} from './View';

src/index.ts

@@ -1,2 +1,3 @@
 export * from './components/NavigationTree';
 export * from './components/TreeView';
+export * from './components/icons';