paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Merge pull request #29264 from backstage/canon-icons

Browse Source 
Canon - Added new icons
This commit is contained in:
Fredrik Adelöw
2025-03-18 11:27:33 +01:00
committed by GitHub
parent a90075af66 d32e051af1
commit c2643ab138
7 changed files with 201 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/happy-pigs-love.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': minor
---
Added about 40 new icons to Canon.
packages/canon/report.api.md
+48 -14
View File
@@ -640,26 +640,60 @@ export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
// @public (undocumented)
export type IconNames =
| 'arrowDown'
| 'arrowLeft'
| 'arrowRight'
| 'arrowUp'
| 'arrowDownCircle'
| 'arrowLeftCircle'
| 'arrowRightCircle'
| 'arrowUpCircle'
| 'account-circle'
| 'alert'
| 'arrow-down'
| 'arrow-down-circle'
| 'caret-down'
| 'caret-left'
| 'caret-right'
| 'caret-up'
| 'arrow-left'
| 'arrow-left-circle'
| 'arrow-left-down'
| 'arrow-left-up'
| 'arrow-right'
| 'arrow-right-circle'
| 'arrow-right-down'
| 'arrow-right-up'
| 'arrow-up'
| 'arrow-up-circle'
| 'braces'
| 'brackets'
| 'bug'
| 'check'
| 'chevronDown'
| 'chevronLeft'
| 'chevronRight'
| 'chevronUp'
| 'check-double'
| 'chevron-down'
| 'chevron-left'
| 'chevron-right'
| 'chevron-up'
| 'cloud'
| 'externalLink'
| 'code'
| 'discord'
| 'download'
| 'external-link'
| 'eye'
| 'eye-off'
| 'filter'
| 'flower'
| 'github'
| 'git-repository'
| 'group'
| 'heart'
| 'moon'
| 'plus'
| 'sidebar-fold'
| 'sidebar-unfold'
| 'sparkling'
| 'star'
| 'sun'
| 'trash';
| 'terminal'
| 'trash'
| 'upload'
| 'user'
| 'youtube'
| 'zoom-in'
| 'zoom-out';
// @public (undocumented)
export type IconProps = {
packages/canon/src/components/Button/Button.stories.tsx
+7 -7
View File
@@ -85,8 +85,8 @@ export const WithIcons: Story = {
render: args => (
<Flex align="center">
<Button {...args} iconStart="cloud" />
<Button {...args} iconEnd="chevronRight" />
<Button {...args} iconStart="cloud" iconEnd="chevronRight" />
<Button {...args} iconEnd="chevron-right" />
<Button {...args} iconStart="cloud" iconEnd="chevron-right" />
</Flex>
),
};
@@ -98,8 +98,8 @@ export const FullWidth: Story = {
render: args => (
<Flex direction="column" gap="4" style={{ width: '300px' }}>
<Button {...args} iconStart="cloud" />
<Button {...args} iconEnd="chevronRight" />
<Button {...args} iconStart="cloud" iconEnd="chevronRight" />
<Button {...args} iconEnd="chevron-right" />
<Button {...args} iconStart="cloud" iconEnd="chevron-right" />
</Flex>
),
};
@@ -158,7 +158,7 @@ export const Playground: Story = {
Button
</Button>
<Button
iconEnd="chevronRight"
iconEnd="chevron-right"
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
>
@@ -166,7 +166,7 @@ export const Playground: Story = {
</Button>
<Button
iconStart="cloud"
iconEnd="chevronRight"
iconEnd="chevron-right"
style={{ width: '200px' }}
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
@@ -189,7 +189,7 @@ export const Playground: Story = {
Button
</Button>
<Button
iconEnd="chevronRight"
iconEnd="chevron-right"
variant={variant as ButtonProps['variant']}
size={size as ButtonProps['size']}
disabled
packages/canon/src/components/Icon/Icon.stories.tsx
+2 -2
View File
@@ -45,11 +45,11 @@ export const Default: Story = {
export const WithCustomIcon: Story = {
args: {
name: 'arrowDown',
name: 'arrow-down',
},
decorators: [
Story => (
<IconProvider overrides={{ arrowDown: () => <div>Custom Icon</div> }}>
<IconProvider overrides={{ 'arrow-down': () => <div>Custom Icon</div> }}>
<Story />
</IconProvider>
),
packages/canon/src/components/Icon/icons.ts
+89 -21
View File
@@ -18,12 +18,12 @@
import type { IconMap } from './types';
import {
RiHeartFill,
RiArrowDownFill,
RiCloudFill,
RiArrowLeftFill,
RiArrowRightFill,
RiArrowUpFill,
RiHeartLine,
RiArrowDownLine,
RiCloudLine,
RiArrowLeftLine,
RiArrowRightLine,
RiArrowUpLine,
RiDeleteBin6Line,
RiAddLine,
RiArrowDownSLine,
@@ -38,28 +38,96 @@ import {
RiMoonLine,
RiSunLine,
RiExternalLinkLine,
RiArrowLeftDownLine,
RiArrowRightDownLine,
RiArrowLeftUpLine,
RiArrowRightUpLine,
RiArrowDropDownLine,
RiArrowDropUpLine,
RiArrowDropLeftLine,
RiArrowDropRightLine,
RiSparklingLine,
RiFlowerLine,
RiCodeLine,
RiTerminalLine,
RiBracketsLine,
RiBracesLine,
RiBugLine,
RiGitRepositoryLine,
RiCheckDoubleLine,
RiFilterLine,
RiEyeLine,
RiEyeOffLine,
RiDownloadLine,
RiUploadLine,
RiStarLine,
RiSidebarFoldLine,
RiSidebarUnfoldLine,
RiZoomInLine,
RiZoomOutLine,
RiAlertLine,
RiAccountCircleLine,
RiGroupLine,
RiUserLine,
RiGithubLine,
RiDiscordLine,
RiYoutubeLine,
} from '@remixicon/react';
/** @public */
export const icons: IconMap = {
arrowDown: RiArrowDownFill,
arrowLeft: RiArrowLeftFill,
arrowRight: RiArrowRightFill,
arrowUp: RiArrowUpFill,
arrowDownCircle: RiArrowDownCircleLine,
arrowLeftCircle: RiArrowLeftCircleLine,
arrowRightCircle: RiArrowRightCircleLine,
arrowUpCircle: RiArrowUpCircleLine,
'account-circle': RiAccountCircleLine,
alert: RiAlertLine,
'arrow-down': RiArrowDownLine,
'arrow-down-circle': RiArrowDownCircleLine,
'caret-down': RiArrowDropDownLine,
'caret-left': RiArrowDropLeftLine,
'caret-right': RiArrowDropRightLine,
'caret-up': RiArrowDropUpLine,
'arrow-left': RiArrowLeftLine,
'arrow-left-circle': RiArrowLeftCircleLine,
'arrow-left-down': RiArrowLeftDownLine,
'arrow-left-up': RiArrowLeftUpLine,
'arrow-right': RiArrowRightLine,
'arrow-right-circle': RiArrowRightCircleLine,
'arrow-right-down': RiArrowRightDownLine,
'arrow-right-up': RiArrowRightUpLine,
'arrow-up': RiArrowUpLine,
'arrow-up-circle': RiArrowUpCircleLine,
braces: RiBracesLine,
brackets: RiBracketsLine,
bug: RiBugLine,
check: RiCheckLine,
chevronDown: RiArrowDownSLine,
chevronUp: RiArrowUpSLine,
chevronLeft: RiArrowLeftSLine,
chevronRight: RiArrowRightSLine,
cloud: RiCloudFill,
externalLink: RiExternalLinkLine,
heart: RiHeartFill,
'check-double': RiCheckDoubleLine,
'chevron-down': RiArrowDownSLine,
'chevron-left': RiArrowLeftSLine,
'chevron-right': RiArrowRightSLine,
'chevron-up': RiArrowUpSLine,
cloud: RiCloudLine,
code: RiCodeLine,
discord: RiDiscordLine,
download: RiDownloadLine,
'external-link': RiExternalLinkLine,
eye: RiEyeLine,
'eye-off': RiEyeOffLine,
filter: RiFilterLine,
flower: RiFlowerLine,
github: RiGithubLine,
'git-repository': RiGitRepositoryLine,
group: RiGroupLine,
heart: RiHeartLine,
moon: RiMoonLine,
plus: RiAddLine,
'sidebar-fold': RiSidebarFoldLine,
'sidebar-unfold': RiSidebarUnfoldLine,
sparkling: RiSparklingLine,
star: RiStarLine,
sun: RiSunLine,
terminal: RiTerminalLine,
trash: RiDeleteBin6Line,
upload: RiUploadLine,
user: RiUserLine,
youtube: RiYoutubeLine,
'zoom-in': RiZoomInLine,
'zoom-out': RiZoomOutLine,
};
packages/canon/src/components/Icon/types.ts
+48 -14
View File
@@ -18,26 +18,60 @@ import { ReactNode } from 'react';
/** @public */
export type IconNames =
| 'arrowDown'
| 'arrowLeft'
| 'arrowRight'
| 'arrowUp'
| 'arrowDownCircle'
| 'arrowLeftCircle'
| 'arrowRightCircle'
| 'arrowUpCircle'
| 'account-circle'
| 'alert'
| 'arrow-down'
| 'arrow-down-circle'
| 'caret-down'
| 'caret-left'
| 'caret-right'
| 'caret-up'
| 'arrow-left'
| 'arrow-left-circle'
| 'arrow-left-down'
| 'arrow-left-up'
| 'arrow-right'
| 'arrow-right-circle'
| 'arrow-right-down'
| 'arrow-right-up'
| 'arrow-up'
| 'arrow-up-circle'
| 'braces'
| 'brackets'
| 'bug'
| 'check'
| 'chevronDown'
| 'chevronLeft'
| 'chevronRight'
| 'chevronUp'
| 'check-double'
| 'chevron-down'
| 'chevron-left'
| 'chevron-right'
| 'chevron-up'
| 'cloud'
| 'externalLink'
| 'code'
| 'discord'
| 'download'
| 'external-link'
| 'eye'
| 'eye-off'
| 'filter'
| 'flower'
| 'github'
| 'git-repository'
| 'group'
| 'heart'
| 'moon'
| 'plus'
| 'sidebar-fold'
| 'sidebar-unfold'
| 'sparkling'
| 'star'
| 'sun'
| 'trash';
| 'terminal'
| 'trash'
| 'upload'
| 'user'
| 'youtube'
| 'zoom-in'
| 'zoom-out';
/** @public */
export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
packages/canon/src/components/IconButton/IconButton.stories.tsx
+2 -2
View File
@@ -121,13 +121,13 @@ export const Playground: Story = {
/>
<IconButton
{...args}
icon="chevronRight"
icon="chevron-right"
variant={variant as IconButtonProps['variant']}
size={size as IconButtonProps['size']}
/>
<IconButton
{...args}
icon="chevronRight"
icon="chevron-right"
variant={variant as IconButtonProps['variant']}
size={size as IconButtonProps['size']}
/>