add filled icons

Author: mollpo

generator.js

@@ -54,15 +54,18 @@ async function generateComponentsForAllFamilies(icon) {
   const families = getIncludedFamilies(icon.unsupported_families)
 
   for (let i = 0; i < families.length; i++) {
-    await generateComponent(icon, families[i])
+    await Promise.all([
+      generateComponent(icon, families[i]),
+      generateComponent(icon, families[i], true),
+    ])
   }
 }
 
-async function generateComponent(icon, family) {
+async function generateComponent(icon, family, filled = false) {
   try {
-    const name = formatName(icon.name, family.postfix)
+    const name = formatName(icon.name, family.postfix, filled)
 
-    const svg = await downloadSVG(icon.name, family.id)
+    const svg = await downloadSVG(icon.name, family.id, filled)
 
     console.log(`Downloading ${name}`)
 
@@ -76,21 +79,22 @@ async function generateComponent(icon, family) {
   }
 }
 
-function formatName(string, familyPostfix) {
+function formatName(string, familyPostfix, filled) {
   const formattedString = string
     .replace(/_/g, ' ')
     .replace(/\w\S*/g, (txt) => {
       return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
     })
     .replace(/ /g, '')
 
-  return 'Icon' + formattedString + familyPostfix
+  return 'Icon' + formattedString + familyPostfix + (filled ? 'Filled' : '')
 }
 
-async function downloadSVG(icon, familyId) {
+async function downloadSVG(icon, familyId, filled) {
+  const filledConfig = filled ? 'fill1' : 'default'
   const svg = await axios
     .get(
-      `https://fonts.gstatic.com/s/i/short-term/release/${familyId}/${icon}/default/24px.svg`,
+      `https://fonts.gstatic.com/s/i/short-term/release/${familyId}/${icon}/${filledConfig}/24px.svg`,
     )
     .catch((err) => console.log(err))
 

src/Icon10kOutlinedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10kOutlinedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M240-360h60v-240H200v60h40v180Zm140 0h100q17 0 28.5-11.5T520-400v-160q0-17-11.5-28.5T480-600H380q-17 0-28.5 11.5T340-560v160q0 17 11.5 28.5T380-360Zm20-60v-120h60v120h-60Zm160 60h60v-90l70 90h70l-90-120 90-120h-70l-70 90v-90h-60v240ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z" />
+  </svg>
+)
+
+export { Icon10kOutlinedFilled as default }

src/Icon10kRoundedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10kRoundedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M240-540v150q0 13 8.5 21.5T270-360q13 0 21.5-8.5T300-390v-180q0-13-8.5-21.5T270-600h-40q-13 0-21.5 8.5T200-570q0 13 8.5 21.5T230-540h10Zm140 180h100q17 0 28.5-11.5T520-400v-160q0-17-11.5-28.5T480-600H380q-17 0-28.5 11.5T340-560v160q0 17 11.5 28.5T380-360Zm20-60v-120h60v120h-60Zm220-30 62 79q2 3 22 11 17 0 25-15.5t-3-29.5l-56-75 57-76q11-14 3-29t-26-15q-7 0-12.5 3t-9.5 8l-62 79v-60q0-13-8.5-21.5T590-600q-13 0-21.5 8.5T560-570v180q0 13 8.5 21.5T590-360q13 0 21.5-8.5T620-390v-60ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z" />
+  </svg>
+)
+
+export { Icon10kRoundedFilled as default }

src/Icon10kSharpFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10kSharpFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M240-360h60v-240H200v60h40v180Zm100 0h180v-240H340v240Zm60-60v-120h60v120h-60Zm160 60h60v-90l70 90h70l-90-120 90-120h-70l-70 90v-90h-60v240ZM120-120v-720h720v720H120Z" />
+  </svg>
+)
+
+export { Icon10kSharpFilled as default }

src/Icon10mpOutlinedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10mpOutlinedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M340-500h60v-240H280v60h60v180Zm180 0h100q17 0 28.5-11.5T660-540v-160q0-17-11.5-28.5T620-740H520q-17 0-28.5 11.5T480-700v160q0 17 11.5 28.5T520-500Zm20-60v-120h60v120h-60ZM240-220h60v-180h40v120h60v-120h40v180h60v-200q0-17-11.5-28.5T460-460H280q-17 0-28.5 11.5T240-420v200Zm300 0h60v-60h80q17 0 28.5-11.5T720-320v-100q0-17-11.5-28.5T680-460H540v240Zm60-120v-60h60v60h-60ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z" />
+  </svg>
+)
+
+export { Icon10mpOutlinedFilled as default }

src/Icon10mpRoundedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10mpRoundedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M340-680v150q0 13 8.5 21.5T370-500q13 0 21.5-8.5T400-530v-180q0-13-8.5-21.5T370-740h-60q-13 0-21.5 8.5T280-710q0 13 8.5 21.5T310-680h30Zm180 180h100q17 0 28.5-11.5T660-540v-160q0-17-11.5-28.5T620-740H520q-17 0-28.5 11.5T480-700v160q0 17 11.5 28.5T520-500Zm20-60v-120h60v120h-60ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm100-280h40v90q0 13 8.5 21.5T370-280q13 0 21.5-8.5T400-310v-90h40v150q0 13 8.5 21.5T470-220q13 0 21.5-8.5T500-250v-170q0-17-11.5-28.5T460-460H280q-17 0-28.5 11.5T240-420v170q0 13 8.5 21.5T270-220q13 0 21.5-8.5T300-250v-150Zm300 120h80q17 0 28.5-11.5T720-320v-100q0-17-11.5-28.5T680-460H570q-13 0-21.5 8.5T540-430v180q0 13 8.5 21.5T570-220q13 0 21.5-8.5T600-250v-30Zm0-60v-60h60v60h-60Z" />
+  </svg>
+)
+
+export { Icon10mpRoundedFilled as default }

src/Icon10mpSharpFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon10mpSharpFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M340-500h60v-240H280v60h60v180Zm140 0h180v-240H480v240Zm60-60v-120h60v120h-60ZM240-220h60v-180h40v120h60v-120h40v180h60v-240H240v240Zm300 0h60v-60h120v-180H540v240Zm60-120v-60h60v60h-60ZM120-120v-720h720v720H120Z" />
+  </svg>
+)
+
+export { Icon10mpSharpFilled as default }

src/Icon11mpOutlinedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon11mpOutlinedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M380-500h60v-240H320v60h60v180Zm200 0h60v-240H520v60h60v180ZM240-220h60v-180h40v120h60v-120h40v180h60v-200q0-17-11.5-28.5T460-460H280q-17 0-28.5 11.5T240-420v200Zm300 0h60v-60h80q17 0 28.5-11.5T720-320v-100q0-17-11.5-28.5T680-460H540v240Zm60-120v-60h60v60h-60ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z" />
+  </svg>
+)
+
+export { Icon11mpOutlinedFilled as default }

src/Icon11mpRoundedFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon11mpRoundedFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M380-680v150q0 13 8.5 21.5T410-500q13 0 21.5-8.5T440-530v-180q0-13-8.5-21.5T410-740h-60q-13 0-21.5 8.5T320-710q0 13 8.5 21.5T350-680h30Zm200 0v150q0 13 8.5 21.5T610-500q13 0 21.5-8.5T640-530v-180q0-13-8.5-21.5T610-740h-60q-13 0-21.5 8.5T520-710q0 13 8.5 21.5T550-680h30ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm100-280h40v90q0 13 8.5 21.5T370-280q13 0 21.5-8.5T400-310v-90h40v150q0 13 8.5 21.5T470-220q13 0 21.5-8.5T500-250v-170q0-17-11.5-28.5T460-460H280q-17 0-28.5 11.5T240-420v170q0 13 8.5 21.5T270-220q13 0 21.5-8.5T300-250v-150Zm300 120h80q17 0 28.5-11.5T720-320v-100q0-17-11.5-28.5T680-460H570q-13 0-21.5 8.5T540-430v180q0 13 8.5 21.5T570-220q13 0 21.5-8.5T600-250v-30Zm0-60v-60h60v60h-60Z" />
+  </svg>
+)
+
+export { Icon11mpRoundedFilled as default }

src/Icon11mpSharpFilled.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { IconProps } from './types'
+
+const Icon11mpSharpFilled: React.FC<IconProps> = ({ ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
+    {props.title && <title>{props.title}</title>}
+    <path d="M380-500h60v-240H320v60h60v180Zm200 0h60v-240H520v60h60v180ZM240-220h60v-180h40v120h60v-120h40v180h60v-240H240v240Zm300 0h60v-60h120v-180H540v240Zm60-120v-60h60v60h-60ZM120-120v-720h720v720H120Z" />
+  </svg>
+)
+
+export { Icon11mpSharpFilled as default }