Skip to content

Commit

Permalink
fix: default variation size (#28)
Browse files Browse the repository at this point in the history 
* remove size prop default assignment

* $derive variationSize and viewBox instead of using $effect
  • Loading branch information
@sebasmaltese
sebasmaltese authored Jul 28, 2024
1 parent b1a8057 commit 0e5911d
Show file tree
Hide file tree
Showing 325 changed files with 4,213 additions and 5,185 deletions.
29 changes: 13 additions & 16 deletions src/lib/AcademicCap.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -100,7 +97,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
29 changes: 13 additions & 16 deletions src/lib/AdjustmentsHorizontal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -166,7 +163,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
29 changes: 13 additions & 16 deletions src/lib/AdjustmentsVertical.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -166,7 +163,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
29 changes: 13 additions & 16 deletions src/lib/ArchiveBox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -100,7 +97,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
29 changes: 13 additions & 16 deletions src/lib/ArchiveBoxArrowDown.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -96,7 +93,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
29 changes: 13 additions & 16 deletions src/lib/ArchiveBoxXMark.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
const ctx: CtxType = getContext('iconCtx') ?? {};
let {
size = ctx.size || '24',
size = ctx.size,
role = ctx.role || 'img',
color = ctx.color || 'currentColor',
variation = ctx.variation || 'outline',
Expand All @@ -18,28 +18,25 @@
let ariaDescribedby = `${title?.id || ''} ${desc?.id || ''}`;
const hasDescription = $derived(!!(title?.id || desc?.id));
let viewBox: string | undefined = $state(undefined);
$effect(() => {
if (variation === 'mini') {
size = size || '20';
viewBox = '0 0 20 20';
} else if (variation === 'micro') {
size = size || '16';
viewBox = '0 0 16 16';
} else {
size = size || '24';
viewBox = '0 0 24 24';
}
let viewBox = $derived.by(() => {
if (variation === 'mini') return '0 0 20 20';
if (variation === 'micro') return '0 0 16 16';
return '0 0 24 24';
});
let variationSize = $derived.by(() => {
if (variation === 'mini') return '20';
if (variation === 'micro') return '16';
return '24';
});
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
{...restProps}
{role}
width={size}
height={size}
width={size || variationSize}
height={size || variationSize}
fill="none"
aria-label={ariaLabel}
aria-describedby={hasDescription ? ariaDescribedby : undefined}
Expand Down Expand Up @@ -100,7 +97,7 @@
@component
[Go to docs](https://svelte-heros-v2.codewithshin.com/)
## Props
@prop size = ctx.size || '24'
@prop size = ctx.size
@prop role = ctx.role || 'img'
@prop color = ctx.color || 'currentColor'
@prop variation = ctx.variation || 'outline'
Expand Down
Loading

0 comments on commit 0e5911d

Please sign in to comment.