forked from cerc-io/snowballtools-base
8ee61c0c85
* 🎨 style: adjust wavy border and add layout wavy border * ♻️ refactor: change sidebar to use `nav` * ♻️ refactor: org slug dashboard layout * ♻️ refactor: create project layout and restyling it * ♻️ refactor: remove unused style * ⚡️ feat: restyling template card * ⚡️ feat: create template icon component * ⚡️ feat: use `h2` for layout title * ⚡️ feat: Add isComingSoon property to templates and handle click event in TemplateCard component * ♻️ refactor: WavyBorder component and update CreateProjectLayout * 🎨 style: update button medium size padding * 🎨 style: update layout shadow and add new shadow for the template card * ⚡️ feat: add wavy border gradient and line svg assets * refactor: update wavy border svg * 🎨 style: adjust template card name and arrow also responsive of the list of template --------- Co-authored-by: Zachery Ng <zachery.ng@gmail.com> |
||
|---|---|---|
| .. | ||
| templates | ||
| ArrowRightCircleFilledIcon.tsx | ||
| ArrowRightCircleIcon.tsx | ||
| BranchIcon.tsx | ||
| CalendarIcon.tsx | ||
| CheckIcon.tsx | ||
| CheckRadioIcon.tsx | ||
| CheckRoundFilledIcon.tsx | ||
| ChevronDownIcon.tsx | ||
| ChevronGrabberHorizontal.tsx | ||
| ChevronLeft.tsx | ||
| ChevronRight.tsx | ||
| ClockIcon.tsx | ||
| ClockOutlineIcon.tsx | ||
| CrossIcon.tsx | ||
| CustomIcon.tsx | ||
| EllipseIcon.tsx | ||
| EllipsesIcon.tsx | ||
| FolderIcon.tsx | ||
| GithubIcon.tsx | ||
| GitHubLogo.tsx | ||
| GitIcon.tsx | ||
| GitTeaIcon.tsx | ||
| GlobeIcon.tsx | ||
| HorizontalDotIcon.tsx | ||
| index.ts | ||
| InfoRoundFilledIcon.tsx | ||
| InfoSquareIcon.tsx | ||
| LifeBuoyIcon.tsx | ||
| LoadingIcon.tsx | ||
| LockIcon.tsx | ||
| NotificationBellIcon.tsx | ||
| PencilIcon.tsx | ||
| PlusIcon.tsx | ||
| QuestionMarkRoundIcon.tsx | ||
| README.md | ||
| SearchIcon.tsx | ||
| SettingsSlidersIcon.tsx | ||
| SnowballIcon.tsx | ||
| WarningDiamondIcon.tsx | ||
| WarningIcon.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" />