Skip to content

feat: add bucket and buckets icons #996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bert-e merged 1 commit into from
Jan 30, 2026
Merged

feat: add bucket and buckets icons #996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/lib/components/icon/CustomsIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,39 @@ export const RemoteGroup = ({ ariaLabel, color, size }) => {
</svg>
);
};

export const Bucket = ({ ariaLabel, color, size }) => {
const getColor = useGetColor(color);
return (
<svg
viewBox="0 0 32 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
aria-label={ariaLabel}
>
<path
d="M30.0239 0C31.2114 0 32.1489 1.125 31.9614 2.3125L28.5239 24.5625C28.2114 26.5625 26.5239 28 24.5239 28H7.46143C5.46143 28 3.77393 26.5625 3.52393 24.5625L0.0239303 2.3125C-0.16357 1.125 0.77393 0 2.02393 0H30.0239ZM27.6489 4H4.33643L6.21143 16H25.7739L27.6489 4Z"
fill={getColor}
/>
</svg>
);
};

export const Buckets = ({ ariaLabel, color, size }) => {
const getColor = useGetColor(color);
return (
<svg
viewBox="0 0 37 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
aria-label={ariaLabel}
>
<path
d="M35.1063 9.33301C35.9032 9.33313 36.5329 10.0834 36.4071 10.875L34.0995 25.708C33.8897 27.0412 32.7571 27.9999 31.4149 28H24.1278C26.417 27.5019 28.221 25.649 28.5985 23.2334V23.2305L29.0975 20H32.2538L33.5126 12H30.3329L30.745 9.33301H35.1063ZM28.0223 0C29.1305 0.000168028 30.0049 1.04998 29.8299 2.1582L26.6219 22.9248C26.3303 24.7915 24.7552 26.1338 22.8885 26.1338H6.96373C5.09707 26.1338 3.52226 24.7915 3.28893 22.9248L0.0223272 2.1582C-0.152604 1.04996 0.721996 0.000113715 1.88854 0H28.0223ZM4.04674 3.7334L5.79674 14.9336H24.0555L25.8055 3.7334H4.04674ZM22.4901 12H17.8671L18.0135 12.9336H15.2987L14.9725 10.875C14.8467 10.0834 15.4756 9.33323 16.3143 9.33301H22.9071L22.4901 12Z"
fill={getColor}
/>
</svg>
);
};
11 changes: 9 additions & 2 deletions src/lib/components/icon/Icon.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import styled, { css } from 'styled-components';
import { CoreUITheme } from '../../style/theme';
import { Loader } from '../loader/Loader.component';
import { RemoteGroup, RemoteUser } from './CustomsIcons';
import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';

// Module-level cache for imported icons
const iconCache: Record<string, any> = {};
Expand All @@ -24,7 +24,6 @@ export const iconTable = {
'Node-pdf': 'fas faDatabase',
'Volume-pdf': 'fas faCompactDisc',
Network: 'fas faProjectDiagram',
Bucket: 'fas faGlassWhiskey',
'Cloud-backend': 'fas faCloud',
Datacenter: 'fas faWarehouse',
'Simple-user': 'fas faUser',
Expand Down Expand Up @@ -164,10 +163,18 @@ export const customIcons: Record<
'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (
<RemoteGroup ariaLabel={ariaLabel} color={color} size={size} />
),
Bucket: ({ 'aria-label': ariaLabel, color, size }) => (
<Bucket ariaLabel={ariaLabel} color={color} size={size} />
),
Buckets: ({ 'aria-label': ariaLabel, color, size }) => (
<Buckets ariaLabel={ariaLabel} color={color} size={size} />
),
};

customIcons['Remote-user'].displayName = 'RemoteUser';
customIcons['Remote-group'].displayName = 'RemoteGroup';
customIcons['Bucket'].displayName = 'Bucket';
customIcons['Buckets'].displayName = 'Buckets';

const IconStyled = styled(FontAwesomeIcon)`
${(props) => {
Expand Down
Loading