Skip to content

Refactor: move all icons to common components #445

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
sheabunge merged 1 commit into from
Aug 9, 2026
Merged

Refactor: move all icons to common components #445

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
2 changes: 1 addition & 1 deletion src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Button } from '../../common/Button'
import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownloadButton'
import { CloudSnippetPreviewModal } from '../../common/cloud/CloudSnippetPreviewModal'
import { CloudStatusIndicator } from '../../common/cloud/CloudStatusBadge'
import { CloudUpdateIcon } from '../../common/icons/CloudIcons'
import { CloudUpdateIcon } from '../../common/icons/CloudUpdateIcon'
import { SnippetCard } from '../../common/SnippetCard'
import { useCloudSearch } from './WithCloudSearchContext'
import type { ReactNode } from 'react'
Expand Down
15 changes: 1 addition & 14 deletions src/js/components/common/KebabMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import React, {
useRef,
useState
} from 'react'
import { KebabIcon } from './icons/KebabIcon'
import type { Dispatch, PropsWithChildren, ReactNode, RefObject, SetStateAction } from 'react'

const FOCUSABLE_SELECTOR = [
Expand Down Expand Up @@ -80,20 +81,6 @@ export const KebabMenuRow: React.FC<PropsWithChildren<KebabMenuRowProps>> = ({
{children}
</li>

const KebabIcon: React.FC = () =>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<circle cx="9" cy="3.5" r="1.6" fill="currentColor" />
<circle cx="9" cy="9" r="1.6" fill="currentColor" />
<circle cx="9" cy="14.5" r="1.6" fill="currentColor" />
</svg>

interface PopoverBehaviourOptions {
isOpen: boolean
setIsOpen: Dispatch<SetStateAction<boolean>>
Expand Down
3 changes: 2 additions & 1 deletion src/js/components/common/SnippetViewToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react'
import classnames from 'classnames'
import { __ } from '@wordpress/i18n'
import { CardViewIcon, TableViewIcon } from './icons/ViewIcons'
import { CardViewIcon } from './icons/CardViewIcon'
import { TableViewIcon } from './icons/TableViewIcon'
import type { SnippetView } from '../../types/SnippetView'

export interface SnippetViewToggleProps {
Expand Down
6 changes: 5 additions & 1 deletion src/js/components/common/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import classnames from 'classnames'
import React, { useState } from 'react'
import { isLicensed, shouldShowUpsell } from '../../utils/screen'
import { buildUrl, fetchQueryParam } from '../../utils/urls'
import { BlueprintIcon, CommunityIcon, LibraryIcon, SettingsIcon, SnippetsIcon } from './icons/ToolbarIcons'
import { BlueprintIcon } from './icons/BlueprintIcon'
import { CommunityIcon } from './icons/CommunityIcon'
import { LibraryIcon } from './icons/LibraryIcon'
import { SettingsIcon } from './icons/SettingsIcon'
import { SnippetsIcon } from './icons/SnippetsIcon'
import { UpsellDialog } from './UpsellDialog'
import type { ReactNode } from 'react'

Expand Down
13 changes: 13 additions & 0 deletions src/js/components/common/icons/BlueprintIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import type { SVGProps } from 'react'

export const BlueprintIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
d="M19.499 17.334a2.167 2.167 0 1 1-2.167 2.167m2.167-2.167a2.167 2.167 0 0 0-2.167 2.167m2.167-2.167V8.667m-2.167 10.834H8.665m0 0A2.167 2.167 0 0 0 6.5 17.334m2.166 2.167A2.167 2.167 0 1 1 6.5 17.334m0 0V8.667m2.166-2.166A2.167 2.167 0 1 0 6.5 8.667m2.166-2.166A2.167 2.167 0 0 1 6.5 8.667m2.166-2.166h8.667m0 0a2.167 2.167 0 1 1 2.167 2.166m-2.167-2.166a2.167 2.167 0 0 0 2.167 2.166M8.124 8.126l9.75 9.75m-9.75 0 9.75-9.75"
/>
</svg>
26 changes: 1 addition & 25 deletions src/js/components/common/icons/ViewIcons.tsx → .../components/common/icons/CardViewIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,9 @@ import React from 'react'
import type { SVGProps } from 'react'

export const CardViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<rect x="2" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
<rect x="10.5" y="2" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
<rect x="2" y="10.5" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
<rect x="10.5" y="10.5" width="5.5" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.6" />
</svg>

export const TableViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M2.5 4.5H15.5M2.5 9H15.5M2.5 13.5H15.5"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
/>
</svg>
12 changes: 0 additions & 12 deletions src/js/components/common/icons/CloudIcons.tsx
View file
Open in desktop

This file was deleted.

13 changes: 13 additions & 0 deletions src/js/components/common/icons/CloudUpdateIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import type { SVGProps } from 'react'

export const CloudUpdateIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M9.17636 13.7674H5.09053C3.12371 13.7643 1.5293 12.2296 1.5293 10.3362C1.5293 8.44351 3.12371 6.90874 5.09053 6.90874C5.39106 5.56133 6.46242 4.46168 7.90083 4.02351C9.33848 3.58609 10.926 3.87592 12.0639 4.78821C13.2018 5.69821 13.7172 7.08768 13.4174 8.4351H14.1745C15.2298 8.4351 16.1421 9.0568 16.568 9.95686M14.5293 12.2349V16.8232M12.2352 14.529L14.5293 16.8232L16.8234 14.529"
stroke="#FF9800"
strokeWidth="1.41177"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
13 changes: 13 additions & 0 deletions src/js/components/common/icons/CommunityIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import type { SVGProps } from 'react'

export const CommunityIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M20.0417 20.0417L22.75 22.75M4.33333 6.5H21.6667M4.33333 13H8.66666M4.33333 19.5H8.66666M11.9167 16.25C11.9167 17.3993 12.3732 18.5015 13.1859 19.3141C13.9985 20.1268 15.1007 20.5833 16.25 20.5833C17.3993 20.5833 18.5015 20.1268 19.3141 19.3141C20.1268 18.5015 20.5833 17.3993 20.5833 16.25C20.5833 15.1007 20.1268 13.9985 19.3141 13.1859C18.5015 12.3732 17.3993 11.9167 16.25 11.9167C15.1007 11.9167 13.9985 12.3732 13.1859 13.1859C12.3732 13.9985 11.9167 15.1007 11.9167 16.25Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
2 changes: 1 addition & 1 deletion src/js/components/common/icons/CopyIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import type { SVGProps } from 'react'

export const CopyIcon = (props: SVGProps<SVGSVGElement>) =>
export const CopyIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M12 6V4.5C12 4.10218 11.842 3.72064 11.5607 3.43934C11.2794 3.15804 10.8978 3 10.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V10.5C3 10.8978 3.15804 11.2794 3.43934 11.5607C3.72064 11.842 4.10218 12 4.5 12H6M6 7.5C6 7.10218 6.15804 6.72065 6.43934 6.43934C6.72065 6.15804 7.10218 6 7.5 6H13.5C13.8978 6 14.2794 6.15804 14.5607 6.43934C14.842 6.72065 15 7.10218 15 7.5V13.5C15 13.8978 14.842 14.2794 14.5607 14.5607C14.2794 14.842 13.8978 15 13.5 15H7.5C7.10218 15 6.72065 14.842 6.43934 14.5607C6.15804 14.2794 6 13.8978 6 13.5V7.5Z"
Expand Down
2 changes: 1 addition & 1 deletion src/js/components/common/icons/ExpandIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import type { SVGProps } from 'react'

export const ExpandIcon = (props: SVGProps<SVGSVGElement>) =>
export const ExpandIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M12 3H15V6" />
<path d="M10.5 7.5L15 3L10.5 7.5Z" />
Expand Down
9 changes: 9 additions & 0 deletions src/js/components/common/icons/KebabIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'
import type { SVGProps } from 'react'

export const KebabIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<circle cx="9" cy="3.5" r="1.6" fill="currentColor" />
<circle cx="9" cy="9" r="1.6" fill="currentColor" />
<circle cx="9" cy="14.5" r="1.6" fill="currentColor" />
</svg>
13 changes: 13 additions & 0 deletions src/js/components/common/icons/LibraryIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import type { SVGProps } from 'react'

export const LibraryIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M11.9167 19.5045H7.21175C4.42541 19.5002 2.16666 17.326 2.16666 14.6436C2.16666 11.9624 4.42541 9.78812 7.21175 9.78812C7.6375 7.87928 9.15525 6.32145 11.193 5.7007C13.2297 5.08103 15.4787 5.49162 17.0907 6.78403C18.7027 8.0732 19.4328 10.0416 19.0082 11.9505H20.0807C20.8821 11.9519 21.6621 12.2097 22.3067 12.686C22.9513 13.1624 23.4266 13.8324 23.6632 14.5981M21.6667 22.7502L23.8333 20.5835L21.6667 18.4169M18.4167 18.4169L16.25 20.5835L18.4167 22.7502"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
2 changes: 1 addition & 1 deletion src/js/components/common/icons/MinimiseIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import type { SVGProps } from 'react'

export const MinimiseIcon = (props: SVGProps<SVGSVGElement>) =>
export const MinimiseIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M3.75 6.75H6.75V3.75" />
<path d="M2.25 2.25L6.75 6.75L2.25 2.25Z" />
Expand Down
20 changes: 20 additions & 0 deletions src/js/components/common/icons/SettingsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react'
import type { SVGProps } from 'react'

export const SettingsIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M11.1854 4.67675C11.6469 2.77442 14.3531 2.77442 14.8146 4.67675C14.8838 4.96253 15.0196 5.22793 15.2108 5.45133C15.402 5.67474 15.6432 5.84984 15.9149 5.96239C16.1865 6.07494 16.4809 6.12176 16.7741 6.09902C17.0673 6.07629 17.3509 5.98466 17.602 5.83158C19.2736 4.81325 21.1878 6.72642 20.1695 8.39908C20.0166 8.65004 19.9252 8.93353 19.9025 9.2265C19.8798 9.51948 19.9266 9.81367 20.039 10.0852C20.1514 10.3567 20.3263 10.5978 20.5495 10.789C20.7726 10.9802 21.0377 11.116 21.3233 11.1854C23.2256 11.6469 23.2256 14.3531 21.3233 14.8146C21.0375 14.8838 20.7721 15.0196 20.5487 15.2108C20.3253 15.402 20.1502 15.6432 20.0376 15.9149C19.9251 16.1865 19.8782 16.4809 19.901 16.7741C19.9237 17.0673 20.0153 17.3509 20.1684 17.602C21.1868 19.2736 19.2736 21.1878 17.6009 20.1695C17.35 20.0166 17.0665 19.9252 16.7735 19.9025C16.4805 19.8798 16.1863 19.9266 15.9148 20.039C15.6433 20.1514 15.4022 20.3263 15.211 20.5495C15.0198 20.7726 14.884 21.0377 14.8146 21.3233C14.3531 23.2256 11.6469 23.2256 11.1854 21.3233C11.1162 21.0375 10.9804 20.7721 10.7892 20.5487C10.598 20.3253 10.3568 20.1502 10.0851 20.0376C9.81347 19.9251 9.51907 19.8782 9.2259 19.901C8.93273 19.9237 8.64907 20.0153 8.398 20.1684C6.72642 21.1868 4.81217 19.2736 5.8305 17.6009C5.98336 17.35 6.07485 17.0665 6.09752 16.7735C6.1202 16.4805 6.07343 16.1863 5.96101 15.9148C5.84859 15.6433 5.6737 15.4022 5.45055 15.211C5.22739 15.0198 4.96228 14.884 4.67675 14.8146C2.77442 14.3531 2.77442 11.6469 4.67675 11.1854C4.96253 11.1162 5.22793 10.9804 5.45133 10.7892C5.67474 10.598 5.84984 10.3568 5.96239 10.0851C6.07494 9.81347 6.12176 9.51907 6.09902 9.2259C6.07629 8.93273 5.98466 8.64907 5.83158 8.398C4.81325 6.72642 6.72642 4.81217 8.39908 5.8305C9.48242 6.48917 10.8864 5.90633 11.1854 4.67675Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 13C9.75 13.862 10.0924 14.6886 10.7019 15.2981C11.3114 15.9076 12.138 16.25 13 16.25C13.862 16.25 14.6886 15.9076 15.2981 15.2981C15.9076 14.6886 16.25 13.862 16.25 13C16.25 12.138 15.9076 11.3114 15.2981 10.7019C14.6886 10.0924 13.862 9.75 13 9.75C12.138 9.75 11.3114 10.0924 10.7019 10.7019C10.0924 11.3114 9.75 12.138 9.75 13Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
13 changes: 13 additions & 0 deletions src/js/components/common/icons/SnippetsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import type { SVGProps } from 'react'

export const SnippetsIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M7.58333 8.66634L3.25 12.9997L7.58333 17.333M18.4167 8.66634L22.75 12.9997L18.4167 17.333M15.1667 4.33301L10.8333 21.6663"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
12 changes: 12 additions & 0 deletions src/js/components/common/icons/TableViewIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react'
import type { SVGProps } from 'react'

export const TableViewIcon: React.FC<SVGProps<SVGSVGElement>> = props =>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M2.5 4.5H15.5M2.5 9H15.5M2.5 13.5H15.5"
stroke="currentColor"
strokeWidth="1.8"
strokeLinecap="round"
/>
</svg>
64 changes: 0 additions & 64 deletions src/js/components/common/icons/ToolbarIcons.tsx
View file
Open in desktop

This file was deleted.

Loading