Merge pull request #1 from lynnlo/main

Exposed Fill and TabIndex props to Icons
shinokada · Mar 18, 2024 · 474813a · 474813a
2 parents e368497 + 78bb012
commit 474813a
Show file tree

Hide file tree

Showing 288 changed files with 7,040 additions and 287 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/Activity.svelte b/src/lib/Activity.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'activity';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -38,5 +41,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'activity';
 -->
diff --git a/src/lib/Airplay.svelte b/src/lib/Airplay.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'airplay';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -41,5 +44,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'airplay';
 -->
diff --git a/src/lib/AlertCircle.svelte b/src/lib/AlertCircle.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'alert circle';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'alert circle';
 -->
diff --git a/src/lib/AlertOctagon.svelte b/src/lib/AlertOctagon.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'alert octagon';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'alert octagon';
 -->
diff --git a/src/lib/AlertTriangle.svelte b/src/lib/AlertTriangle.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'alert triangle';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -41,5 +44,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'alert triangle';
 -->
diff --git a/src/lib/AlignCenter.svelte b/src/lib/AlignCenter.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'align center';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'align center';
 -->
diff --git a/src/lib/AlignJustify.svelte b/src/lib/AlignJustify.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'align justify';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'align justify';
 -->
diff --git a/src/lib/AlignLeft.svelte b/src/lib/AlignLeft.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'align left';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'align left';
 -->
diff --git a/src/lib/AlignRight.svelte b/src/lib/AlignRight.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'align right';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'align right';
 -->
diff --git a/src/lib/Anchor.svelte b/src/lib/Anchor.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'anchor';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -41,5 +44,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'anchor';
 -->
diff --git a/src/lib/Aperture.svelte b/src/lib/Aperture.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'aperture';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -54,5 +57,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'aperture';
 -->
diff --git a/src/lib/Archive.svelte b/src/lib/Archive.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'archive';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'archive';
 -->
diff --git a/src/lib/ArrowDown.svelte b/src/lib/ArrowDown.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'arrow down';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -38,5 +41,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'arrow down';
 -->
diff --git a/src/lib/ArrowDownCircle.svelte b/src/lib/ArrowDownCircle.svelte
@@ -4,6 +4,8 @@
   export let size = ctx.size || '24';
   export let role = ctx.role || 'img';
   export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
+  export let fill = ctx.fill || 'none';
   export let ariaLabel = 'arrow down circle';
 </script>
 
@@ -12,8 +14,9 @@
   width={size}
   height={size}
   viewBox="0 0 24 24"
-  fill="none"
+  fill={fill}
   stroke={color}
+  tabIndex={tabIndex}
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
@@ -44,5 +47,6 @@
 @prop export let size = ctx.size || '24';
 @prop export let role = ctx.role || 'img';
 @prop export let color = ctx.color || 'currentColor';
+  export let tabIndex = ctx.tabIndex || '-1';
 @prop export let ariaLabel = 'arrow down circle';
 -->