feat: implement logic for icons

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

View File

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

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
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) {
const classNames = iconVariants({ className, color })

View File

@@ -1,6 +1,6 @@
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) {
const classNames = iconVariants({ className, color })

View File

@@ -1,6 +1,6 @@
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) {
const classNames = iconVariants({ className, color })

View File

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

View File

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

View File

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