forked from cerc-io/snowballtools-base
f84e2c0d9d
### TL;DR A refactor of the Icon components in the front-end package has been carried out. This includes `CollaboratorsIcon.tsx`, `CopyUnfilledIcon.tsx`, and `TrashIcon.tsx`. ### What changed? Several attributes previously written in kebab-case were changed to camelCase to adhere to JSX syntax standards. These include `stroke-linecap`, `stroke-linejoin`, `fill-rule`, and `clip-rule`. ### How to test? Ensure that the rendering and functionality of the icons in the application remain unchanged after this update. ### Why make this change? The update ensures that our code complies with the preferred casing convention in JSX and avoids all potential related issues. |
||
|---|---|---|
| .. | ||
| templates | ||
| AppleIcon.tsx | ||
| ArrowLeftCircleFilledIcon.tsx | ||
| ArrowRightCircleFilledIcon.tsx | ||
| ArrowRightCircleIcon.tsx | ||
| BranchIcon.tsx | ||
| BranchStrokeIcon.tsx | ||
| BuildingIcon.tsx | ||
| CalendarDaysIcon.tsx | ||
| CalendarIcon.tsx | ||
| CheckIcon.tsx | ||
| CheckRadioIcon.tsx | ||
| CheckRadioOutlineIcon.tsx | ||
| CheckRoundFilledIcon.tsx | ||
| ChevronDoubleDownIcon.tsx | ||
| ChevronDownIcon.tsx | ||
| ChevronDownSmallIcon.tsx | ||
| ChevronGrabberHorizontal.tsx | ||
| ChevronLeft.tsx | ||
| ChevronRight.tsx | ||
| ChevronUpDown.tsx | ||
| ChevronUpSmallIcon.tsx | ||
| CirclePlaceholderOnIcon.tsx | ||
| ClockIcon.tsx | ||
| ClockOutlineIcon.tsx | ||
| CollaboratorsIcon.tsx | ||
| CommitIcon.tsx | ||
| CopyIcon.tsx | ||
| CopyUnfilledIcon.tsx | ||
| CrossCircleIcon.tsx | ||
| CrossIcon.tsx | ||
| CursorBoxIcon.tsx | ||
| CustomIcon.tsx | ||
| EditBigIcon.tsx | ||
| EllipseIcon.tsx | ||
| EllipsesIcon.tsx | ||
| FolderIcon.tsx | ||
| GearIcon.tsx | ||
| GithubIcon.tsx | ||
| GitHubLogoIcon.tsx | ||
| GithubStrokeIcon.tsx | ||
| GitIcon.tsx | ||
| GitTeaIcon.tsx | ||
| GlobeIcon.tsx | ||
| GoogleIcon.tsx | ||
| HideEyeOffIcon.tsx | ||
| HorizontalDotIcon.tsx | ||
| index.ts | ||
| InfoRoundFilledIcon.tsx | ||
| InfoSquareIcon.tsx | ||
| KeyIcon.tsx | ||
| LifeBuoyIcon.tsx | ||
| LinkChainIcon.tsx | ||
| LinkIcon.tsx | ||
| LoaderIcon.tsx | ||
| LoadingIcon.tsx | ||
| LockIcon.tsx | ||
| LogoutIcon.tsx | ||
| MenuIcon.tsx | ||
| MinusCircleIcon.tsx | ||
| NotificationBellIcon.tsx | ||
| PencilIcon.tsx | ||
| PlusIcon.tsx | ||
| QuestionMarkRoundFilledIcon.tsx | ||
| QuestionMarkRoundIcon.tsx | ||
| README.md | ||
| RefreshIcon.tsx | ||
| RocketIcon.tsx | ||
| SearchIcon.tsx | ||
| SettingsSlidersIcon.tsx | ||
| ShowEyeIcon.tsx | ||
| SnowballIcon.tsx | ||
| StorageIcon.tsx | ||
| SwitchIcon.tsx | ||
| TrashIcon.tsx | ||
| TrendingIcon.tsx | ||
| UndoIcon.tsx | ||
| WarningDiamondIcon.tsx | ||
| WarningIcon.tsx | ||
| WarningTriangleIcon.tsx | ||
1. What icons are compatible with this component?
- Viewbox "0 0 24 24": From where you're exporting from, please make sure the icon is using viewBox="0 0 24 24" before downloading/exporting. Not doing so will result in incorrect icon scaling
2. How to add a new icon?
2.1 Sanitising the icon
- Duplicate a current icon e.g. CrossIcon and rename it accordingly.
- Rename the function inside the new file you duplicated too
- Replace the markup with your SVG markup (make sure it complies with the above section's rule)
- Depending on the svg you pasted...
A. If the
<svg>has only 1 child, remove the<svg>parent entirely so you only have the path left B. If your component has more than 1 paths, rename<svg>tag with the<g>tag. Then, remove all attributes of this<g>tag so that it's just<g> - Usually, icons are single colored. If that's the case, replace all fill/stroke color with
currentColor. E.g.. Leave the other attributes without removing them. - If your icon has more than one colour, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors
- Lastly, export your icon in
index.tsby following what was done for CrossIcon - Make sure to provide a name to the
<CustomIcon>component for accessibility sake - Done!
2.3 Use your newly imported icon
- You can change simply use
<BellIcon size="32" />to quickly change both width and height with the same value (square). For custom viewBox, width and height, simply provide all three props. - Coloring the icon: Simply add a className with text color. E.g.
<BellIcon className="text-gray-500" />