diff --git a/public/laconic_logo.svg b/public/laconic_logo.svg new file mode 100644 index 0000000..ab8603a --- /dev/null +++ b/public/laconic_logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/laconic_logo_with_text.svg b/public/laconic_logo_with_text.svg new file mode 100644 index 0000000..fdfcf05 --- /dev/null +++ b/public/laconic_logo_with_text.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/CustomIcon/CustomIcon.tsx b/src/components/CustomIcon/CustomIcon.tsx new file mode 100644 index 0000000..f887596 --- /dev/null +++ b/src/components/CustomIcon/CustomIcon.tsx @@ -0,0 +1,30 @@ +import React, { ComponentPropsWithoutRef } from "react"; + +export interface CustomIconProps extends ComponentPropsWithoutRef<"svg"> { + size?: number | string; // width and height will both be set as the same value + name?: string; +} + +export const CustomIcon: React.FC = ({ + children, + width = 24, + height = 24, + size, + viewBox = "0 0 24 24", + name, + ...rest +}: CustomIconProps) => { + return ( + + {children} + + ); +}; diff --git a/src/components/CustomIcon/README.md b/src/components/CustomIcon/README.md new file mode 100644 index 0000000..7376c3a --- /dev/null +++ b/src/components/CustomIcon/README.md @@ -0,0 +1,78 @@ +# CustomIcon + +`CustomIcon` is a flexible and reusable React component for rendering SVG icons. It allows for easy customization of size, color, and other SVG properties. + +- 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 + +## Create a Custom Icon + +1. Duplicate a current icon e.g. `LaconicIcon` and rename it accordingly. +2. Rename the function inside the new file you duplicated too +3. Replace the markup with your SVG markup (make sure it complies with the above section's rule) +4. Depending on the svg you pasted... + A. If the `` has only 1 child, remove the `` parent entirely so you only have the path left + B. If your component has more than 1 paths, rename `` tag with the `` tag. Then, remove all attributes of this `` tag so that it's just `` +5. 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. +6. If your icon has more than one color, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors +7. Lastly, export your icon in `index.ts` by following what was done for `LaconicIcon` +8. Make sure to provide a `name` for the `` component for accessibility +9. Done! + +Example: + +```tsx +import { CustomIcon, CustomIconProps } from "../CustomIcon"; + +export const LaconicIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; +``` + +## Usage + +```tsx +import { LaconicIcon } from './components/CustomIcon'; + +... + + +``` + +## Props + +The `CustomIcon` component accepts the following props: + +- `children`: SVG content (paths, groups, etc.) +- `size`: Sets both width and height (number or string) +- `width`: SVG width (default: 24) +- `height`: SVG height (default: 24) +- `viewBox`: SVG viewBox (default: "0 0 24 24") +- `name`: Icon name for accessibility (sets aria-labelledby) +- ...other SVG props + +## Accessibility + +Always provide a `name` prop to the CustomIcon for improved accessibility. This sets the `aria-labelledby` attribute on the SVG. + +```tsx + + {/* SVG content */} + +``` + +For icons that are purely decorative, the component sets `role="presentation"` by default. diff --git a/src/components/CustomIcon/icons/LaconicIcon.tsx b/src/components/CustomIcon/icons/LaconicIcon.tsx new file mode 100644 index 0000000..f712fb5 --- /dev/null +++ b/src/components/CustomIcon/icons/LaconicIcon.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { CustomIcon, CustomIconProps } from "../CustomIcon"; + +export const LaconicIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/src/components/CustomIcon/icons/LaconicWithTextIcon.tsx b/src/components/CustomIcon/icons/LaconicWithTextIcon.tsx new file mode 100644 index 0000000..fa123dc --- /dev/null +++ b/src/components/CustomIcon/icons/LaconicWithTextIcon.tsx @@ -0,0 +1,50 @@ +import React from "react"; + +import { CustomIcon, CustomIconProps } from "../CustomIcon"; + +export const LaconicWithTextIcon: React.FC = (props) => { + return ( + + + + + + + + + + + ); +}; diff --git a/src/components/CustomIcon/index.ts b/src/components/CustomIcon/index.ts new file mode 100644 index 0000000..7bbe733 --- /dev/null +++ b/src/components/CustomIcon/index.ts @@ -0,0 +1,2 @@ +export { LaconicIcon } from "./icons/LaconicIcon"; +export { LaconicWithTextIcon } from "./icons/LaconicWithTextIcon";