diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx
index 1247da7119..fef8e1fda3 100644
--- a/src/lib/components/icon/Icon.component.tsx
+++ b/src/lib/components/icon/Icon.component.tsx
@@ -137,6 +137,45 @@ export const iconTable = {
News: 'fas faBullhorn',
};
+export const customIcons = {
+ 'Remote-user': ({ ariaLabel, color, size }) => (
+
+ ),
+ 'Remote-group': ({ ariaLabel, color, size }) => (
+
+ ),
+};
+
const IconStyled = styled(FontAwesomeIcon)`
${(props) => {
const theme = props.theme;
@@ -148,7 +187,7 @@ const IconStyled = styled(FontAwesomeIcon)`
}}
`;
-export type IconName = keyof typeof iconTable;
+export type IconName = keyof typeof iconTable | keyof typeof customIcons;
export type IconColor = keyof CoreUITheme;
type Props = {
name: IconName;
@@ -215,12 +254,17 @@ function NonWrappedIcon({
ariaLabel = '',
...rest
}: Omit) {
- const iconInfo = iconTable[name];
+ const iconInfo = iconTable[name] || customIcons[name];
if (!iconInfo) throw new Error(`${name}: is not a valid icon.`);
const { data, status } = useQuery({
queryKey: ['icon', name],
queryFn: async () => {
+ if (customIcons[name]) {
+ return {
+ default: customIcons[name],
+ };
+ }
const [iconType, iconClass] = iconInfo.split(' ');
try {
const fontAwesomeType =
diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx
index 9f7e2a3203..a560ecae99 100644
--- a/stories/icon.stories.tsx
+++ b/stories/icon.stories.tsx
@@ -3,6 +3,7 @@ import {
Icon,
iconTable,
IconName,
+ customIcons,
} from '../src/lib/components/icon/Icon.component';
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
@@ -132,14 +133,16 @@ export const AllIcons = {
Name |
- {(Object.keys(iconTable) as IconName[]).map((key, index) => (
-
-
-
- |
- {key} |
-
- ))}
+ {(Object.keys({ ...iconTable, ...customIcons }) as IconName[]).map(
+ (key, index) => (
+
+
+
+ |
+ {key} |
+
+ ),
+ )}
),
diff --git a/stories/icons.mdx b/stories/icons.mdx
index 08a6f94fa3..cc7004ff36 100644
--- a/stories/icons.mdx
+++ b/stories/icons.mdx
@@ -1,5 +1,7 @@
import ImageFile from './pictures/icon-design-system.png';
import { Meta } from '@storybook/addon-docs';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import { QueryClientProvider, QueryClient } from 'react-query';
@@ -19,90 +21,92 @@ When next to a text, the icon and the text should have the same size.
## Icon set table
-| Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case |
-| :-------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
-| | Account | Entities | FA | wallet | `` | solid Style (fas) | yes | Hero |
-| | Backend | Entities | FA | network-wired | `` | solid Style (fas) | yes | Hero |
-| | Tape | Entities | FA | tape | `` | solid Style (fas) | yes | Hero |
-| | Node-backend | Entities | FA | server | `` | solid Style (fas) | yes | Hero |
-| | Volume-backend | Entities | FA | hdd | `` | solid Style (fas) | yes | Hero |
-| | Node-ptf | Entities | FA | database | `` | solid Style (fas) | yes | Hero |
-| | Volume-ptf | Entities | FA | compact-disc | `` | solid Style (fas) | yes | Hero |
-| | Network | Entities | FA | project-diagram | `` | solid Style (fas) | yes | Hero |
-| | Bucket | Entities | FA | glass-whiskey | `` | solid Style (fas) | yes | Hero |
-| | Cloud-backend | Entities | FA | cloud | `` | solid Style (fas) | yes | Hero |
-| | Datacenter | Entities | FA | warehouse | `` | solid Style (fas) | yes | Hero |
-| | User | Menu | FA | user-cog | `` | solid Style (fas) | yes | Top navbar |
-| | Alert | Menu | FA | bell | `` | solid Style (fas) | yes | |
-| | Lat-menu | Menu | FA | bars | `` | solid Style (fas) | yes | Expanded version of lat navbar |
-| | Dashboard | Menu | FA | desktop | `` | solid Style (fas) | yes | |
-| | Expiration | Workflow | FA | stopwatch | `` | solid Style (fas) | yes | |
-| | Replication | Workflow | FA | coins | `` | solid Style (fas) | yes | |
-| | Transition | Workflow | FA | rocket | `` | solid Style (fas) | yes | |
-| | Discovery | Workflow | FA | reply | `` | solid Style (fas) | yes | |
-| | Metrics | Action icon | FA | chart-line | `` | solid Style (fas) | yes | Last column of Tables |
-| | Logs | Action icon | FA | file-alt | `` | regular Style (far) | yes | |
-| | Edit | Action icon | FA | edit | `` | solid Style (fas) | yes | Field editable |
-| | Create-add | Button-action | FA | plus | `` | solid Style (fas) | yes | New entity creation |
-| | Delete | Button-action | FA | trash | `` | solid Style (fas) | yes | Entity deletion |
-| | Save | Button-action | FA | save | `` | solid Style (fas) | yes | Save changes on an entity |
-| | External-link | Button-action | FA | external-link-alt | `` | solid Style (fas) | yes | Open an external link |
-| | Close | Button-action | FA | times | `` | solid Style (fas) | yes | Close a window/modal |
-| | Dropdown-down | Button-action | FA | caret-down | `` | solid Style (fas) | yes | Expand a drop-down |
-| | Dropdown-up | Button-action | FA | caret-up | `` | solid Style (fas) | yes | Dropdown expanded |
-| | Search | Button-action | FA | search | `` | solid Style (fas) | yes | Search bar |
-| | More | Button-action | FA | ellipsis-v | `` | solid Style (fas) | yes | End of tables (not enough space to display all actions) |
-| | Info | Button-action | FA | question-circle | `` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) |
-| | Sync | Button-action | FA | sync | `` | solid Style (fas) | yes | Refresh the metrics |
-| | Export | Button-action | FA | file-export | `` | solid Style (fas) | yes | Export the data in predefined format |
-| | Copy | Button-action | FA | clone | `` | regular Style (far) | yes | Small icon next to a field that can be copied |
-| | Upload | Button-action | FA | file-upload | `` | solid Style (fas) | yes | Upload object |
-| | Add-plus | Button-action | FA | plus-square | `` | solid Style (fas) | yes | Add an item in a list |
-| | Remove-minus | Button-action | FA | minus-square | `` | solid Style (fas) | yes | Remove an item in a list |
-| | Sort | Table | FA | sort | `` | solid Style (fas) | yes | Sort |
-| | Sort-up | Table | FA | sort-up | `` | solid Style (fas) | yes | Sort |
-| | Sort-down | Table | FA | sort-down | `` | solid Style (fas) | yes | Sort |
-| | Calendar | Pill | FA | calendar-week | `` | solid Style (fas) | yes | Metric over a period |
-| | Arrow-up | Pill | FA | arrow-up | `` | solid Style (fas) | yes | Show an increase in trend |
-| | Arrow-down | Pill | FA | arrow-down | `` | solid Style (fas) | yes | Show a decrease in trend |
-| | Folder | Browsing | FA | folder | `` | regular Style (far) | yes | Browsing |
-| | File | Browsing | FA | file | `` | regular Style (far) | yes | Browsing |
-| | Deletion-marker | Browsing | FA | ban | `` | solid Style (fas) | yes | Browsing - deletion markers on objects |
-| | Info-circle | Status | FA | info-circle | `` | solid Style (fas) | yes | Grey empty state-status (charts, tables) |
-| | Exclamation-triangle | Status | FA | exclamation-triangle | `` | solid Style (fas) | yes | Yellow warning status (alerts list) |
-| | Exclamation-circle | Status | FA | exclamation-circle | `` | solid Style (fas) | yes | Red critical alerts |
-| | Check | Status | FA | check | `` | solid Style (fas) | yes | Healthy status AND successful operation |
-| | Protected | Status | FA | shield-alt | `` | solid Style (fas) | yes | Extra protection status |
-| | Bars | Menu | FA | bars | `` | solid Style (fas) | yes | Expand/collapse the lat navbar |
-| | Bound | Status | FA | link | `` | solid Style (fas) | yes | Bound status |
-| | Unbound | Status | FA | unlink | `` | solid Style (fas) | yes | Unbound status |
-| | Exclamation | Status | FA | exclamation | `` | solid Style (fas) | yes | Issue status |
-| | Hyphen | Status | FA | minus | `` | solid Style (fas) | yes | No status, in tables |
-| | Remove-circle | Action | FA | times-circle | `` | solid Style (fas) | yes | Remove a criteria in a search |
-| | Object-upload | Action | FA | file-upload | `` | solid Style (fas) | yes | When uploading an object |
-| | Chevron-left | Navigation | FA | chevron-left | `` | solid Style (fas) | yes | Expand tabs |
-| | Chevron-right | Navigation | FA | chevron-right | `` | solid Style (fas) | yes | Expand tables |
-| | Angle-double-right | Status | FA | angle-double-right | `` | solid Style (fas) | yes | Show an increase "From 1 value to another one" |
-| | Language | Menu | FA | language | `` | solid Style (fas) | yes | Select the language in the top menu |
-| | Theme | Menu | FA | palette | `` | solid Style (fas) | yes | Select the theme in the top menu |
-| | Documentation | Menu | FA | clipboard-list | `` | solid Style (fas) | yes | Access to the documentation link |
-| | Support | Menu | FA | comments | `` | solid Style (fas) | yes | Access to the support link |
-| | EULA | Menu | FA | file-contract | `` | solid Style (fas) | yes | Access to the "Terms of use" link |
-| | Log-out | Menu | FA | sign-out-alt | `` | solid Style (fas) | yes | Log out action |
-| | Hourglass | Status | FA | hourglass | `` | regular Style (far) | ? | Workflow delayed |
-| | Pause | Status | FA | pause | `` | solid Style (fas) | yes | Workflow paused |
-| | Upgrade | Button-action | FA | level-up-alt | `` | solid Style (fas) | yes | Upgrade version |
-| | Expansion | Button-action | FA | expand-alt | `` | solid Style (fas) | yes | Expand with no rebalancing |
-| | Rebalance | Button-action | FA | balance-scale | `` | solid Style (fas) | yes | Expand with rebalancing |
-| | Maintenance | Button-action | FA | hard-hat | `` | solid Style (fas) | yes | Switch to "maintenance mode" |
-| | Change-erasure | Button-action | FA | exchange-alt | `` | solid Style (fas) | yes | Change erasure code level |
-| | Circle-health | Status | FA | circle | `` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) |
-| | Circle-empty | Status | FA | circle | `` | regular Style (far) | yes | Display empty health status |
-| | Services | Status | FA | toolbox | `` | solid Style (fas) | yes | Status icon for Services |
-| | Data-services | Hero | FA | cubes | `` | solid Style (fas) | yes | Hero icon for Data-services |
-| | Arrow-right | Navigation | FA | arrow-right | `` | solid Style (fas) | yes | Button as "Continue", next step |
-| | Arrow-left | Navigation | FA | arrow-left | `` | solid Style (fas) | yes | Go back to a previous status/page |
-| | Certificate | Entities | FA | certificate | `` | solid Style (fas) | yes | Certificate |
-| | Download | Action icon | FA | download | `` | solid Style (fas) | yes | Download |
-| | ID-card | Entities | FA | id-card | `` | solid Style (fas) | yes | Identity |
-| | Setting | Action | FA | cog | `` | solid Style (fas) | yes | Global Settings |
+| Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case |
+| :----------------------------------------------------------------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
+| | Account | Entities | FA | wallet | `` | solid Style (fas) | yes | Hero |
+| | Backend | Entities | FA | network-wired | `` | solid Style (fas) | yes | Hero |
+| | Tape | Entities | FA | tape | `` | solid Style (fas) | yes | Hero |
+| | Node-backend | Entities | FA | server | `` | solid Style (fas) | yes | Hero |
+| | Volume-backend | Entities | FA | hdd | `` | solid Style (fas) | yes | Hero |
+| | Node-ptf | Entities | FA | database | `` | solid Style (fas) | yes | Hero |
+| | Volume-ptf | Entities | FA | compact-disc | `` | solid Style (fas) | yes | Hero |
+| | Network | Entities | FA | project-diagram | `` | solid Style (fas) | yes | Hero |
+| | Bucket | Entities | FA | glass-whiskey | `` | solid Style (fas) | yes | Hero |
+| | Cloud-backend | Entities | FA | cloud | `` | solid Style (fas) | yes | Hero |
+| | Datacenter | Entities | FA | warehouse | `` | solid Style (fas) | yes | Hero |
+| | User | Menu | FA | user-cog | `` | solid Style (fas) | yes | Top navbar |
+| | Alert | Menu | FA | bell | `` | solid Style (fas) | yes | |
+| | Lat-menu | Menu | FA | bars | `` | solid Style (fas) | yes | Expanded version of lat navbar |
+| | Dashboard | Menu | FA | desktop | `` | solid Style (fas) | yes | |
+| | Expiration | Workflow | FA | stopwatch | `` | solid Style (fas) | yes | |
+| | Replication | Workflow | FA | coins | `` | solid Style (fas) | yes | |
+| | Transition | Workflow | FA | rocket | `` | solid Style (fas) | yes | |
+| | Discovery | Workflow | FA | reply | `` | solid Style (fas) | yes | |
+| | Metrics | Action icon | FA | chart-line | `` | solid Style (fas) | yes | Last column of Tables |
+| | Logs | Action icon | FA | file-alt | `` | regular Style (far) | yes | |
+| | Edit | Action icon | FA | edit | `` | solid Style (fas) | yes | Field editable |
+| | Create-add | Button-action | FA | plus | `` | solid Style (fas) | yes | New entity creation |
+| | Delete | Button-action | FA | trash | `` | solid Style (fas) | yes | Entity deletion |
+| | Save | Button-action | FA | save | `` | solid Style (fas) | yes | Save changes on an entity |
+| | External-link | Button-action | FA | external-link-alt | `` | solid Style (fas) | yes | Open an external link |
+| | Close | Button-action | FA | times | `` | solid Style (fas) | yes | Close a window/modal |
+| | Dropdown-down | Button-action | FA | caret-down | `` | solid Style (fas) | yes | Expand a drop-down |
+| | Dropdown-up | Button-action | FA | caret-up | `` | solid Style (fas) | yes | Dropdown expanded |
+| | Search | Button-action | FA | search | `` | solid Style (fas) | yes | Search bar |
+| | More | Button-action | FA | ellipsis-v | `` | solid Style (fas) | yes | End of tables (not enough space to display all actions) |
+| | Info | Button-action | FA | question-circle | `` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) |
+| | Sync | Button-action | FA | sync | `` | solid Style (fas) | yes | Refresh the metrics |
+| | Export | Button-action | FA | file-export | `` | solid Style (fas) | yes | Export the data in predefined format |
+| | Copy | Button-action | FA | clone | `` | regular Style (far) | yes | Small icon next to a field that can be copied |
+| | Upload | Button-action | FA | file-upload | `` | solid Style (fas) | yes | Upload object |
+| | Add-plus | Button-action | FA | plus-square | `` | solid Style (fas) | yes | Add an item in a list |
+| | Remove-minus | Button-action | FA | minus-square | `` | solid Style (fas) | yes | Remove an item in a list |
+| | Sort | Table | FA | sort | `` | solid Style (fas) | yes | Sort |
+| | Sort-up | Table | FA | sort-up | `` | solid Style (fas) | yes | Sort |
+| | Sort-down | Table | FA | sort-down | `` | solid Style (fas) | yes | Sort |
+| | Calendar | Pill | FA | calendar-week | `` | solid Style (fas) | yes | Metric over a period |
+| | Arrow-up | Pill | FA | arrow-up | `` | solid Style (fas) | yes | Show an increase in trend |
+| | Arrow-down | Pill | FA | arrow-down | `` | solid Style (fas) | yes | Show a decrease in trend |
+| | Folder | Browsing | FA | folder | `` | regular Style (far) | yes | Browsing |
+| | File | Browsing | FA | file | `` | regular Style (far) | yes | Browsing |
+| | Deletion-marker | Browsing | FA | ban | `` | solid Style (fas) | yes | Browsing - deletion markers on objects |
+| | Info-circle | Status | FA | info-circle | `` | solid Style (fas) | yes | Grey empty state-status (charts, tables) |
+| | Exclamation-triangle | Status | FA | exclamation-triangle | `` | solid Style (fas) | yes | Yellow warning status (alerts list) |
+| | Exclamation-circle | Status | FA | exclamation-circle | `` | solid Style (fas) | yes | Red critical alerts |
+| | Check | Status | FA | check | `` | solid Style (fas) | yes | Healthy status AND successful operation |
+| | Protected | Status | FA | shield-alt | `` | solid Style (fas) | yes | Extra protection status |
+| | Bars | Menu | FA | bars | `` | solid Style (fas) | yes | Expand/collapse the lat navbar |
+| | Bound | Status | FA | link | `` | solid Style (fas) | yes | Bound status |
+| | Unbound | Status | FA | unlink | `` | solid Style (fas) | yes | Unbound status |
+| | Exclamation | Status | FA | exclamation | `` | solid Style (fas) | yes | Issue status |
+| | Hyphen | Status | FA | minus | `` | solid Style (fas) | yes | No status, in tables |
+| | Remove-circle | Action | FA | times-circle | `` | solid Style (fas) | yes | Remove a criteria in a search |
+| | Object-upload | Action | FA | file-upload | `` | solid Style (fas) | yes | When uploading an object |
+| | Chevron-left | Navigation | FA | chevron-left | `` | solid Style (fas) | yes | Expand tabs |
+| | Chevron-right | Navigation | FA | chevron-right | `` | solid Style (fas) | yes | Expand tables |
+| | Angle-double-right | Status | FA | angle-double-right | `` | solid Style (fas) | yes | Show an increase "From 1 value to another one" |
+| | Language | Menu | FA | language | `` | solid Style (fas) | yes | Select the language in the top menu |
+| | Theme | Menu | FA | palette | `` | solid Style (fas) | yes | Select the theme in the top menu |
+| | Documentation | Menu | FA | clipboard-list | `` | solid Style (fas) | yes | Access to the documentation link |
+| | Support | Menu | FA | comments | `` | solid Style (fas) | yes | Access to the support link |
+| | EULA | Menu | FA | file-contract | `` | solid Style (fas) | yes | Access to the "Terms of use" link |
+| | Log-out | Menu | FA | sign-out-alt | `` | solid Style (fas) | yes | Log out action |
+| | Hourglass | Status | FA | hourglass | `` | regular Style (far) | ? | Workflow delayed |
+| | Pause | Status | FA | pause | `` | solid Style (fas) | yes | Workflow paused |
+| | Upgrade | Button-action | FA | level-up-alt | `` | solid Style (fas) | yes | Upgrade version |
+| | Expansion | Button-action | FA | expand-alt | `` | solid Style (fas) | yes | Expand with no rebalancing |
+| | Rebalance | Button-action | FA | balance-scale | `` | solid Style (fas) | yes | Expand with rebalancing |
+| | Maintenance | Button-action | FA | hard-hat | `` | solid Style (fas) | yes | Switch to "maintenance mode" |
+| | Change-erasure | Button-action | FA | exchange-alt | `` | solid Style (fas) | yes | Change erasure code level |
+| | Circle-health | Status | FA | circle | `` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) |
+| | Circle-empty | Status | FA | circle | `` | regular Style (far) | yes | Display empty health status |
+| | Services | Status | FA | toolbox | `` | solid Style (fas) | yes | Status icon for Services |
+| | Data-services | Hero | FA | cubes | `` | solid Style (fas) | yes | Hero icon for Data-services |
+| | Arrow-right | Navigation | FA | arrow-right | `` | solid Style (fas) | yes | Button as "Continue", next step |
+| | Arrow-left | Navigation | FA | arrow-left | `` | solid Style (fas) | yes | Go back to a previous status/page |
+| | Certificate | Entities | FA | certificate | `` | solid Style (fas) | yes | Certificate |
+| | Download | Action icon | FA | download | `` | solid Style (fas) | yes | Download |
+| | ID-card | Entities | FA | id-card | `` | solid Style (fas) | yes | Identity |
+| | Setting | Action | FA | cog | `` | solid Style (fas) | yes | Global Settings |
+| | Remote-user | Entities | Custom | - | - | custom icon | - | Remote user in Identity UI |
+| | Remote-group | Entities | Custom | - | - | custom icon | - | Remote group in Identity UI |