scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement logic for icons

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-06-11 15:07:07 +02:00
parent bb22f5b292
commit df22c39909
10 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Icons/Calendar.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function CalendarIcon({ export default function CalendarIcon({
className, className,

2
components/Icons/CheckCircle.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function CheckCircleIcon({ export default function CheckCircleIcon({
className, className,

2
components/Icons/ChevronDown.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function ChevronDownIcon({ export default function ChevronDownIcon({
className, className,

2
components/Icons/Email.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function EmailIcon({ className, color, ...props }: IconProps) { export default function EmailIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })

2
components/Icons/House.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function HouseIcon({ className, color, ...props }: IconProps) { export default function HouseIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })

2
components/Icons/Phone.tsx
View File

@@ -1,6 +1,6 @@
import { iconVariants } from "./variants" import { iconVariants } from "./variants"
import type { IconProps } from "@/types/components/icon" import { IconProps } from "@/types/components/icon"
export default function PhoneIcon({ className, color, ...props }: IconProps) { export default function PhoneIcon({ className, color, ...props }: IconProps) {
const classNames = iconVariants({ className, color }) const classNames = iconVariants({ className, color })

5
components/Icons/icon.module.css
View File

@@ -2,27 +2,22 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.black, .black,
.black * { .black * {
fill: #000; fill: #000;
} }
.burgundy, .burgundy,
.burgundy * { .burgundy * {
fill: var(--Scandic-Brand-Burgundy); fill: var(--Scandic-Brand-Burgundy);
} }
.pale, .pale,
.pale * { .pale * {
fill: var(--Scandic-Brand-Pale-Peach); fill: var(--Scandic-Brand-Pale-Peach);
} }
.peach80, .peach80,
.peach80 * { .peach80 * {
fill: var(--Scandic-Peach-80); fill: var(--Scandic-Peach-80);
} }
.plosa, .plosa,
.plosa * { .plosa * {
fill: var(--Theme-Primary-Light-On-Surface-Accent); fill: var(--Theme-Primary-Light-On-Surface-Accent);

2
components/MyPages/Blocks/Shortcuts/index.tsx
View File

@@ -30,7 +30,7 @@ export default function Shortcuts({
variant="shortcut" variant="shortcut"
> >
<span>{shortcut.text ? shortcut.text : shortcut.title}</span> <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
<ArrowRightIcon /> <ArrowRightIcon color="burgundy" className={styles.arrowRight} />
</Link> </Link>
))} ))}
</section> </section>

5
components/MyPages/Blocks/Shortcuts/shortcuts.module.css
View File

@@ -28,3 +28,8 @@
.link:last-child { .link:last-child {
border-bottom: none; border-bottom: none;
} }
.arrowRight {
height: 24px;
width: 24px;
}

4
types/components/deprecatedIconProps.ts Normal file
View File

@@ -0,0 +1,4 @@
export type DeprecatedIconProps = {
height?: number
width?: number
}