Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.

Commit

Permalink
react/components/Icon: update icon data
Browse files Browse the repository at this point in the history
  • Loading branch information
arnemolland committed Nov 2, 2022
1 parent d271d76 commit 8352595
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 18 deletions.
18 changes: 6 additions & 12 deletions src/react/components/Icon/Icon.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FC } from 'react'
import { IconData, IconName } from './data'

export type IconSize = 'small' | 'medium' | 'large' | 'xlarge'
export type IconSize = 'sm' | 'md' | 'lg' | 'xl'

export interface IconProps {
/**
Expand Down Expand Up @@ -34,14 +34,6 @@ export interface IconProps {
className?: string
}

// Tailwind classes for the icon sizes
const sizeMap = {
small: 'w-[0.75rem] h-[0.75rem]',
medium: 'w-[1rem] h-[1rem]',
large: 'w-[1.5rem] h-[1.5rem]',
xlarge: 'w-[2rem] h-[2rem]',
}

/**
* Component for displaying a Flume icon
*
Expand All @@ -50,7 +42,7 @@ const sizeMap = {
* return <Icon icon="eye" size="large" />
*/
export const Icon: FC<IconProps> = (props) => {
const { icon, color, size = 'medium', inline = false, filled = false, className } = props
const { icon, color, size, inline = false, filled = false, className } = props
let iconName = icon

if (filled && !icon.includes('filled') && `${icon}_filled` in IconData) {
Expand All @@ -60,8 +52,10 @@ export const Icon: FC<IconProps> = (props) => {
return (
<span
className={`inline-flex self-center align-middle ${!color && 'text-body'} ${
sizeMap[size]
} ${className}`}>
size === 'sm' ? 'w-[0.75rem] h-[0.75rem]' : ''
} ${size === 'md' ? 'w-[1rem] h-[1rem]' : ''} ${
size === 'lg' ? 'w-[1.5rem] h-[1.5rem]' : ''
} ${size === 'xl' ? 'w-[2rem] h-[2rem]' : ''} ${className}`}>
<svg
className={`relative ${inline && 'text-inherit'}`}
xmlns="http://www.w3.org/2000/svg"
Expand Down
15 changes: 9 additions & 6 deletions src/react/components/Icon/data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ export const IconData = {
'M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 20a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm6.71-12.29-9.41 9.4-3.88-4.63 1.51-1.31 2.48 3 7.88-7.89Z',
check_circle_filled:
'M23 12A11 11 0 1 1 12 1a11 11 0 0 1 11 11ZM9.31 18.11l9.4-9.4-1.42-1.42-7.88 7.89-2.48-3-1.51 1.3 3.89 4.63Z',
chevron_down: 'M20,8v2.59l-8,5.6L4,10.59v-2.59l8,5.6,8-5.6Z',
chevron_left: 'M10.33,12l5.6,8h-2.59L7.73,12,13.33,4h2.59l-5.6,8Z',
chevron_right: 'M16.19,12l-5.6,8h-2.59l5.6-8L8,4h2.59l5.6,8Z',
chevron_up: 'M20,13.41v2.59l-8-5.6-8,5.6v-2.59L12,7.81l8,5.6Z',
chevron_down: 'm4 10.88 8 5.6 8-5.6V9l-8 5.6L4 9Z',
chevron_left: 'm13.12 4-5.6 8 5.6 8H15l-5.6-8L15 4Z',
chevron_right: 'm10.88 4 5.6 8-5.6 8H9l5.6-8L9 4Z',
chevron_up: 'm4 13.12 8-5.6 8 5.6V15l-8-5.6L4 15Z',
circle: 'M6,12a6,6 0 1,0 12,0a6,6 0 1,0 -12,0',
clock:
'M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 20a9 9 0 1 1 9-9 9 9 0 0 1-9 9Zm1-10h3v2h-5V5h2Z',
Expand All @@ -46,8 +46,7 @@ export const IconData = {
cookie:
'M16.13,14.75a1.38,1.38,0,1,0,1.37,1.38A1.38,1.38,0,0,0,16.13,14.75ZM14.75,7.88a1.38,1.38,0,1,0,0-2.75,1.38,1.38,0,0,0,0,2.75ZM9.25,9.25a1.38,1.38,0,1,0-1.37,1.38A1.37,1.37,0,0,0,9.25,9.25Zm0,5.5a1.38,1.38,0,1,0,1.38,1.38A1.37,1.37,0,0,0,9.25,14.75Zm4.13-4.12A1.38,1.38,0,1,0,14.75,12,1.37,1.37,0,0,0,13.38,10.63ZM22.93,12l-.52-3.28a5.69,5.69,0,0,0-1.6-3.13L18.46,3.18a5.74,5.74,0,0,0-3.12-1.59L12,1.07A5.22,5.22,0,0,0,11.16,1a5.67,5.67,0,0,0-2.58.62l-3,1.51A5.71,5.71,0,0,0,3.13,5.61l-1.51,3a5.67,5.67,0,0,0-.55,3.48l.52,3.28a5.69,5.69,0,0,0,1.6,3.13l2.35,2.36a5.74,5.74,0,0,0,3.12,1.59l3.3.52a5.26,5.26,0,0,0,.89.07,5.63,5.63,0,0,0,2.57-.62l3-1.51a5.71,5.71,0,0,0,2.48-2.48l1.51-3A5.67,5.67,0,0,0,22.93,12Zm-2.39,2.54-1.51,3A3.55,3.55,0,0,1,17.45,19l-3,1.52a3.51,3.51,0,0,1-2.2.34L9,20.37a3.59,3.59,0,0,1-2-1L4.64,17a3.65,3.65,0,0,1-1-2l-.52-3.28a3.63,3.63,0,0,1,.35-2.22L5,6.55A3.55,3.55,0,0,1,6.55,5l3-1.51a3.58,3.58,0,0,1,1.64-.4,3.64,3.64,0,0,1,.56,0l3.3.52a3.6,3.6,0,0,1,2,1L19.36,7a3.59,3.59,0,0,1,1,2l.52,3.28a3.63,3.63,0,0,1-.35,2.22Z',
download: 'M18,12.1V9.83l-5,3.25V1H11V13.08L6,9.83V12.1L12,16ZM23,21V19H1v2Z',
expand:
'M20,6.6v2.59L12,3.59,4,9.19v-2.59L12,1l8,5.6ZM4,14.81v2.59l8,5.6,8-5.6v-2.59l-8,5.6L4,14.81Z',
expand: 'm4 7.12 8-5.6 8 5.6V9l-8-5.6L4 9Zm0 9.76 8 5.6 8-5.6V15l-8 5.6L4 15Z',
eye: 'M23.41 11A12.77 12.77 0 0 0 .59 11l-.24.47.24.53a12.77 12.77 0 0 0 22.82 0l.24-.47ZM12 7.35a3.11 3.11 0 1 1-3.11 3.11A3.12 3.12 0 0 1 12 7.35Zm0 9.58a10.66 10.66 0 0 1-9.32-5.43 10.69 10.69 0 0 1 5.79-4.83 5.19 5.19 0 1 0 7.06 0 10.69 10.69 0 0 1 5.79 4.83A10.66 10.66 0 0 1 12 16.93Zm-2.07-6.47H12V8.39a2.08 2.08 0 1 1-2.07 2.07Z',
eye_filled:
'M23.41 11A12.77 12.77 0 0 0 .59 11l-.24.47.24.53a12.77 12.77 0 0 0 22.82 0l.24-.47ZM12 16.69a5.19 5.19 0 1 1 5.19-5.19A5.2 5.2 0 0 1 12 16.69Zm3.11-5.19a3.11 3.11 0 0 1-6.22 0 3 3 0 0 1 .19-1H11V8.58a3 3 0 0 1 1-.19 3.11 3.11 0 0 1 3.11 3.11Z',
Expand Down Expand Up @@ -81,6 +80,8 @@ export const IconData = {
'M13 1h-2v1c-3.14.4-6 2.38-6 6v8.5L3 18v2h18v-2l-2-1.5V8c0-3.62-2.86-5.6-6-5.95Zm1 20h-4a2 2 0 0 0 4 0Z',
pencil: 'M16.6,10.23,8.11,18.72H5.28V15.89L13.77,7.4Zm2.12-2.12L15.89,5.28,14.47,6.7,17.3,9.53Z',
plus: 'M19,11v2H13v6H11V13H5V11h6V5h2v6Z',
qualify:
'M17.74,11.73c0-3.51-2.79-6.07-5.97-6.07s-5.99,2.61-5.99,6.02,2.61,6.03,6,6.03c1.02,0,1.98-.21,2.82-.67l1.01,1.3h2.61l-2-2.58c.99-1.12,1.52-2.48,1.52-4.03Zm-2.9,2.26l-1.02-1.33h-2.62l2.07,2.66c-.45,.19-.98,.3-1.47,.3-2.02,0-3.79-1.54-3.79-3.89s1.7-3.97,3.78-3.97,3.76,1.82,3.76,3.95c0,.82-.24,1.6-.69,2.27Z',
screen: 'M1 3h22v16H1V3Zm2 14h18q-.06-6 0-12H3q.05 6 0 12Zm15 4H6v2h12Z',
search:
'M10 19a9 9 0 1 0-9-9 9 9 0 0 0 9 9Zm0-2.12A6.88 6.88 0 1 1 16.88 10 6.88 6.88 0 0 1 10 16.88ZM15.9 19l2.42 4h2.34l-2.42-4Z',
Expand Down Expand Up @@ -126,6 +127,8 @@ export const IconData = {
trophy_filled:
'M18 3V1H6v2H1v6.57l5 3v2l5 3V21H7v2h10v-2h-4v-3.43l5-3v-2l5-3V3ZM6 10.23l-3-1.8V5h3Zm15-1.8-3 1.8V5h3Z',
upload: 'M12 1 6 4.9v2.27l5-3.25V16h2V3.92l5 3.25V4.9Zm11 20v-2H1v2Z',
ellipsis_vertical:
'M2 1.5C2 2.05 1.55 2.5 1 2.5C0.45 2.5 0 2.05 0 1.5C0 0.95 0.45 0.5 1 0.5C1.55 0.5 2 0.95 2 1.5ZM1 4C0.45 4 0 4.45 0 5C0 5.55 0.45 6 1 6C1.55 6 2 5.55 2 5C2 4.45 1.55 4 1 4ZM1 7.5C0.45 7.5 0 7.95 0 8.5C0 9.05 0.45 9.5 1 9.5C1.55 9.5 2 9.05 2 8.5C2 7.95 1.55 7.5 1 7.5Z',
user: 'M12 12a5.5 5.5 0 1 0-5.5-5.5A5.51 5.51 0 0 0 12 12Zm0-9a3.5 3.5 0 1 1-3.5 3.5A3.5 3.5 0 0 1 12 3Zm9.78 18-.56-5-.22-2H3l-.22 2-.56 5L2 23h20ZM4.22 21l.56-5h14.44l.56 5Z',
user_filled: 'M6.5 6.5A5.5 5.5 0 1 1 12 12a5.51 5.51 0 0 1-5.5-5.5ZM21 14H3l-1 9h20Z',
users:
Expand Down

0 comments on commit 8352595

Please sign in to comment.