Coding Best Practices

[sub1120]

Here we can discuss and decide coding best practices for better code quality.

[sub1120]

Icon Library Management

• How we are going to manage icons?
• Where we will store icons? ( /assets/icons, /public/icons, or CDN)
• In which format we will store them? (png, jpg, svg etc.)?
• How we will handle the variations in icons (eg. change color in dark mode)? See one example below, how the color of icon changes on hover,
  

Here is one article, but we still need more clarity.
https://forum.figma.com/t/every-icon-best-practice-you-need-to-know/6445

[sub1120]

@shivamvijaywargi , please read this article. https://benadam.me/thoughts/react-svg-sprites/

I think we can go with 3rd logic, "Rendering Icons using SVG Sprites". It solves 3 problems,

1. Loading time
2. Storing is easy
3. Change Icon style with tag (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use)

[shivamvijaywargi]

Won't it be a little hard?

[sub1120]

Why bro?

We Only need to setup one time.

[shivamvijaywargi]

Okay, let's see.

[sub1120]

How to use?

1. Import Icon component

import Icon from "@/components/icon/Icon";

2. Next we just need to use <Icon/> component

<Icon id="icon-id"/>

where icon-id, can be from any of one valid types suggested by the editor.

Additionally, we can alter icon size, fill color, and stroke color, using tailwind classes

<Icon id="MapPin" className="h-12 w-12 hover:stroke-primary"></Icon>

How to add a new Icon

1. Add new <symbol>.

// /public/sprite.svg
<symbol id="icon-id" viewBox="0 0 24 24">
     // Your icon paths
</symbol>

Note: Remove following attributes from your paths, if present fillColor="anyValue" stroke="currentColor", for better control over style overrding.

2. Add your icon-id to idType

// types/icon/index.ts
export type idType = "icon-id" | .....

This step is to enhance code suggestions, while using Icons.

More Examples

// plain icons with default fill, stroke, and size.
 <Icon id="XCircle"></Icon>
 <Icon id="XCircle"></Icon>
 <Icon id="XCircle"></Icon>
 <Icon id="XCircle"></Icon>
 <Icon id="XCircle"></Icon>
 <Icon id="XCircle"></Icon>

// change default stroke color
<Icon id="Pen" className="stroke-primary"></Icon>
<Icon id="Pen" className="stroke-primary"></Icon>
<Icon id="Pen" className="stroke-primary"></Icon>
<Icon id="Pen" className="stroke-primary"></Icon>
<Icon id="Pen" className="stroke-primary"></Icon>
<Icon id="Pen" className="stroke-primary"></Icon>

// fill color with no stroke
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>
<Icon id="ThumbsUp" className="fill-primary stroke-none"></Icon>

// stroke color success
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>
<Icon id="CheckSquare" className="stroke-success-600  "></Icon>

// stroke color warning
<Icon id="Prohibit" className="stroke-warning-600"></Icon>
<Icon id="Prohibit" className="stroke-warning-600"></Icon>
<Icon id="Prohibit" className="stroke-warning-600"></Icon>
<Icon id="Prohibit" className="stroke-warning-600"></Icon>
<Icon id="Prohibit" className="stroke-warning-600"></Icon>
<Icon id="Prohibit" className="stroke-warning-600"></Icon>

// size variation + hover effect
<Icon id="MapPin" className="hover:stroke-primary"></Icon>
<Icon id="MapPin" className="h-12 w-12 hover:stroke-primary"></Icon>
<Icon id="MapPin" className="h-14 w-14 hover:stroke-primary"></Icon>
<Icon id="MapPin" className="h-16 w-16 hover:stroke-primary"></Icon>
<Icon id="MapPin" className="h-20 w-20 hover:stroke-primary"></Icon>
<Icon id="MapPin" className="h-24 w-24 hover:stroke-primary"></Icon>

Output