Skip to content

Commit

Permalink
fix(icons): changed from path to data
Browse files Browse the repository at this point in the history 
docs(Search): updated icons
fix(Button): removed Button.Leading, Button.Trailing, and Button.Icon
fix(Button): set size variable on leading, trailing, and icon slots
fix(Card.Actions.Action): removed dependency on material icons
fix(Card): added Card.Actions.Action.Label
fix(Icon): converted to accept svg element via data instead of path
fix(Toggle): dialed in toggle spacing
fix(Button): adjusting horizontal padding for md and xl sizes
docs: updated all components using icons from path to data
chore: fixed eslint errors
  • Loading branch information
@N00nDay
N00nDay committed Oct 18, 2022
1 parent 6d7110b commit e7ad380
Show file tree
Hide file tree
Showing 59 changed files with 573 additions and 728 deletions.
43 changes: 26 additions & 17 deletions src/docs/components/search/Search.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
import { goto } from '$app/navigation';
import { scale } from 'svelte/transition';
import Kbd from '../kbd/Kbd.svelte';
import {
format_list_numbered,
function_variant,
lightning_bolt_circle,
magnify,
toggle_switch
} from '../../icons';
import { info } from '../../../lib/icons';
let input: HTMLInputElement;
Expand Down Expand Up @@ -74,17 +82,15 @@
on:click={handleOpen}
class="border-light-border dark:border-dark-border border ml-4 shadow-md dark:shadow-black hidden md:flex"
>
<Button.Leading slot="leading">
<Button.Leading.Icon slot="icon" icon="search" />
</Button.Leading>
<Icon slot="leading" data={magnify} let:size {size} />
<div class="w-12 md:w-32 text-left">Search</div>
<Button.Trailing slot="trailing" class="justify-self-end hidden sm:flex">
<div class="justify-self-end hidden sm:flex">
<Kbd>
{#if os === 'MacOS'}⌘{:else}CTRL{/if}
</Kbd>
+
<Kbd>k</Kbd>
</Button.Trailing>
</div>
</Button>

<Button
Expand All @@ -93,7 +99,7 @@
shape="circle"
class="flex md:hidden ml-4 bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon"
>
<Button.Icon slot="icon" icon="search" />
<Icon slot="icon" data={magnify} let:size {size} />
</Button>

{#if open}
Expand All @@ -103,10 +109,12 @@
class="mx-auto max-w-xl transform divide-y divide-light-border dark:divide-dark-border overflow-hidden rounded-xl bg-light-surface dark:bg-dark-surface shadow-2xl"
>
<div class="relative">
<Icon
icon="search"
class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-light-secondary-content dark:text-dark-secondary-content opacity-50"
/>
<span>
<Icon
data={magnify}
class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-light-secondary-content dark:text-dark-secondary-content opacity-50"
/>
</span>
<input
bind:this={input}
type="text"
Expand Down Expand Up @@ -155,13 +163,13 @@
class:bg-error-content={item.type === 'Utility'}
>
{#if item.type === 'Component'}
<Icon icon="toggle_on" class="text-dark-content" />
<Icon data={toggle_switch} class="text-dark-content" />
{:else if item.type === 'Guide'}
<Icon icon="checklist" class="text-dark-content" />
<Icon data={format_list_numbered} class="text-dark-content" />
{:else if item.type === 'Action'}
<Icon icon="offline_bolt" class="text-dark-content" />
<Icon data={lightning_bolt_circle} class="text-dark-content" />
{:else if item.type === 'Utility'}
<Icon icon="functions" class="text-dark-content" />
<Icon data={function_variant} class="text-dark-content" />
{/if}
</div>
<div class="ml-4 flex-auto">
Expand All @@ -177,10 +185,11 @@
</ul>
{:else}
<div class="py-14 px-6 text-center text-sm sm:px-14">
<Icon
icon="info"
<span
class="mx-auto text-5xl text-light-secondary-content dark:text-dark-secondary-content"
/>
>
<Icon data={info} />
</span>
<h2 class="mt-4 text-light-content dark:text-dark-content">No results found</h2>
<p class="mt-2 text-light-secondary-content dark:text-dark-secondary-content">
No components found for this search term. Please try again.
Expand Down
37 changes: 31 additions & 6 deletions src/docs/icons.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,36 @@
export const email =
'M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z';
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>';
export const phone =
'M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z';
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>';
export const lock =
'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z';
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" /></svg>';
export const brightness_5 =
'M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z';
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z" /></svg>';
export const brightness_4 =
'M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z';
export const home = 'M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z';
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z" /></svg>';
export const home =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>';
export const magnify =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" /></svg>';
export const send =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z" /></svg>';
export const trash =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>';
export const arrow_right =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" /></svg>';
export const toggle_switch =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" /></svg>';
export const format_list_numbered =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M7,13V11H21V13H7M7,19V17H21V19H7M7,7V5H21V7H7M3,8V5H2V4H4V8H3M2,17V16H5V20H2V19H4V18.5H3V17.5H4V17H2M4.25,10A0.75,0.75 0 0,1 5,10.75C5,10.95 4.92,11.14 4.79,11.27L3.12,13H5V14H2V13.08L4,11H2V10H4.25Z" /></svg>';
export const lightning_bolt_circle =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5,20L16.36,10.27H13V4L8,13.73H11.5V20M12,2C14.75,2 17.1,3 19.05,4.95C21,6.9 22,9.25 22,12C22,14.75 21,17.1 19.05,19.05C17.1,21 14.75,22 12,22C9.25,22 6.9,21 4.95,19.05C3,17.1 2,14.75 2,12C2,9.25 3,6.9 4.95,4.95C6.9,3 9.25,2 12,2Z" /></svg>';
export const function_variant =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12.42,5.29C11.32,5.19 10.35,6 10.25,7.11L10,10H12.82V12H9.82L9.38,17.07C9.18,19.27 7.24,20.9 5.04,20.7C3.79,20.59 2.66,19.9 2,18.83L3.5,17.33C3.83,18.38 4.96,18.97 6,18.63C6.78,18.39 7.33,17.7 7.4,16.89L7.82,12H4.82V10H8L8.27,6.93C8.46,4.73 10.39,3.1 12.6,3.28C13.86,3.39 15,4.09 15.66,5.17L14.16,6.67C13.91,5.9 13.23,5.36 12.42,5.29M22,13.65L20.59,12.24L17.76,15.07L14.93,12.24L13.5,13.65L16.35,16.5L13.5,19.31L14.93,20.72L17.76,17.89L20.59,20.72L22,19.31L19.17,16.5L22,13.65Z" /></svg>';
export const cog =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>';
export const plus_circle =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>';
export const numeric_1_box =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M14,17H12V9H10V7H14M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" /></svg>';
export const numeric_2_box =
'<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M15,11C15,12.11 14.1,13 13,13H11V15H15V17H9V13C9,11.89 9.9,11 11,11H13V9H9V7H13A2,2 0 0,1 15,9M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" /></svg>';
2 changes: 1 addition & 1 deletion src/lib/components/accordion/Title.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,6 @@
>
<slot />
<span class="transition-transform duration-300" class:-rotate-180={$open}
><Icon path={chevron_down} /></span
><Icon data={chevron_down} /></span
>
</button>
6 changes: 3 additions & 3 deletions src/lib/components/autocomplete/Autocomplete.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
transition:scale|local
class="flex items-center text-light-icon dark:text-dark-icon"
>
<Icon path={close} />
<Icon data={close} />
</span>
</button>
{/if}
Expand All @@ -146,13 +146,13 @@
<span
class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-danger"
>
<Icon path={errorIcon} />
<Icon data={errorIcon} />
</span>
{:else}
<span
class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-light-icon dark:text-dark-icon"
>
<Icon path={unfold_more_horizontal} />
<Icon data={unfold_more_horizontal} />
</span>
{/if}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/autocomplete/Option.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import HoverBackground from '../HoverBackground.svelte';
import { check } from '../../icons';
import Icon from '../icon';
import { get_current_component, onMount } from 'svelte/internal';
import { get_current_component } from 'svelte/internal';
import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
export let use: ActionArray = [];
import { exclude } from '../../utils/exclude';
Expand Down Expand Up @@ -65,7 +65,7 @@
transition:scale|local
class="text-primary absolute inset-y-0 right-0 flex items-center pr-2.5"
>
<Icon path={check} />
<Icon data={check} />
</span>
{/if}

Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/avatar-group/Icon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,6 @@
{#if $$slots.default}
<slot />
{:else}
<Icon path={account} class="h-full w-full" />
<Icon data={account} class="h-full w-full" />
{/if}
</span>
2 changes: 1 addition & 1 deletion src/lib/components/avatar/Icon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,6 @@
{#if $$slots.default}
<slot />
{:else}
<Icon path={account} class="h-full w-full" />
<Icon data={account} class="h-full w-full" />
{/if}
</span>
4 changes: 1 addition & 3 deletions src/lib/components/breadcrumbs/Crumb.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { twMerge } from 'tailwind-merge';
import { BREADCRUMBS_CONTEXT_ID } from './Breadcrumbs.svelte';
import { useContext } from '$lib/utils/useContext';
import { getContext, setContext } from 'svelte/internal';
import { setContext } from 'svelte/internal';
import Divider from './Divider.svelte';
import { get_current_component } from 'svelte/internal';
import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
Expand All @@ -26,8 +26,6 @@
crumb: true
});
const { type }: { type: 'solid' | 'ghost' } = getContext(BREADCRUMBS_CONTEXT_ID);
const defaultClass =
'flex items-center text-light-secondary-content dark:text-dark-secondary-content';
$: finalClass = twMerge(defaultClass, $$props.class);
Expand Down
81 changes: 68 additions & 13 deletions src/lib/components/button-group/Button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
export let ariaLabel: undefined | string = undefined;
export let htmlType = 'button';
const iconSize = '24px';
useContext({
context_id: BUTTON_GROUP_CONTEXT_ID,
parent: 'ButtonGroup',
Expand Down Expand Up @@ -62,28 +64,20 @@
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
>
{#if defaultLoading && $$slots.leading}
<!-- {#if defaultLoading && $$slots.leading}
<div class="mr-2 flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="leading" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
<slot name="leading" slot="on" />
<ButtonLoader slot="off" />
</Swap>
</div>
<slot />
<slot name="trailing" />
{:else if defaultLoading && $$slots.icon}
<div class="flex justify-center items-center relative">
<Swap {loading}>
<svelte:fragment slot="on">
<slot name="icon" />
</svelte:fragment>
<svelte:fragment slot="off">
<ButtonLoader />
</svelte:fragment>
<slot name="icon" slot="on" />
<ButtonLoader slot="off" />
</Swap>
</div>
<slot />
Expand All @@ -99,6 +93,67 @@
<slot name="icon" />
<slot />
<slot name="trailing" />
{/if} -->

{#if defaultLoading}
{#if $$slots.leading && $$slots.icon}
<div class="flex justify-center items-center relative mr-1" style="width: {iconSize};">
<Swap {loading} style="width: {iconSize};">
<slot name="leading" slot="on" size={iconSize} />
<ButtonLoader slot="off" />
</Swap>
</div>
<div class="flex justify-center items-center relative">
<Swap {loading}>
<slot name="icon" slot="on" />
<ButtonLoader slot="off" />
</Swap>
</div>
{:else if $$slots.leading}
<div class="flex justify-center items-center relative mr-1" style="width: {iconSize};">
<Swap {loading} style="width: {iconSize};">
<slot name="leading" slot="on" size={iconSize} />
<ButtonLoader slot="off" />
</Swap>
</div>
{:else if $$slots.icon}
<div class="flex justify-center items-center relative" style="width: {iconSize};">
<Swap {loading} style="width: {iconSize};">
<slot name="icon" slot="on" size={iconSize} />
<ButtonLoader slot="off" />
</Swap>
</div>
{:else if loading}
<div transition:scale|local class="flex justify-center items-center relative mr-1">
<ButtonLoader />
</div>
{/if}
<slot />
{#if $$slots.trailing}
<div class="flex justify-center items-center relative ml-1" style="width: {iconSize};">
<slot name="trailing" size={iconSize} />
</div>
{/if}
{:else}
{#if $$slots.leading}
<div class="flex justify-center items-center relative mr-1" style="width: {iconSize};">
<slot name="leading" size={iconSize} />
</div>
{/if}
{#if $$slots.icon}
<div class="flex justify-center items-center relative" style="width: {iconSize};">
<Swap {loading} style="width: {iconSize};">
<slot name="icon" slot="on" size={iconSize} />
<ButtonLoader slot="off" />
</Swap>
</div>
{/if}
<slot />
{#if $$slots.trailing}
<div class="flex justify-center items-center relative ml-1" style="width: {iconSize};">
<slot name="trailing" size={iconSize} />
</div>
{/if}
{/if}

{#if !disabled}
Expand Down
40 changes: 0 additions & 40 deletions src/lib/components/button-group/Icon.svelte
View file

This file was deleted.

Loading

0 comments on commit e7ad380

Please sign in to comment.