Merge pull request #26 from aboutbits/update-to-symbols

use symbols instead of icons

Author: lukasvice

generator.js

@@ -2,18 +2,22 @@ const fs = require('fs')
 const path = require('path')
 const axios = require('axios')
 
-const GOOGLE_FONTS_URL = 'https://fonts.google.com/metadata/icons'
+const GOOGLE_FONTS_URL =
+  'https://fonts.google.com/metadata/icons?key=material_symbols&incomplete=true'
 const ICON_FAMILIES = [
-  { id: 'materialicons', postfix: '' },
-  { id: 'materialiconsoutlined', postfix: 'Outlined' },
-  { id: 'materialiconsround', postfix: 'Rounded' },
-  { id: 'materialiconssharp', postfix: 'Sharp' },
-  { id: 'materialiconstwotone', postfix: 'TwoTone' },
+  { id: 'materialsymbolsoutlined', postfix: 'Outlined' },
+  { id: 'materialsymbolsrounded', postfix: 'Rounded' },
+  { id: 'materialsymbolssharp', postfix: 'Sharp' },
 ]
 
-const ignoredIcons = [
-  'addchart', // This icon exists twice 'addchart' and 'add_chart'. That's why we decide to only use one version, so that we don't get naming collisions.
-]
+const getIncludedFamilies = (unsupportedFamilies) => {
+  const unsupportedFamilyIds = unsupportedFamilies.map((family) =>
+    family.replace(/\s+/g, '').toLowerCase(),
+  )
+  return ICON_FAMILIES.filter(
+    (family) => !unsupportedFamilyIds.includes(family.id),
+  )
+}
 
 ;(async () => {
   generatePropsFile()
@@ -25,9 +29,7 @@ const ignoredIcons = [
   const icons = await JSON.parse(data)
 
   for (let i = 0; i < icons.icons.length; i++) {
-    if (ignoredIcons.includes(icons.icons[i].name)) continue
-
-    generateComponentsForAllFamilies(icons.icons[i])
+    await generateComponentsForAllFamilies(icons.icons[i])
   }
 })()
 
@@ -43,15 +45,21 @@ function generatePropsFile() {
 }
 
 async function generateComponentsForAllFamilies(icon) {
-  for (let i = 0; i < ICON_FAMILIES.length; i++) {
-    await generateComponent(icon, ICON_FAMILIES[i])
+  const families = getIncludedFamilies(icon.unsupported_families)
+
+  for (let i = 0; i < families.length; 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 svg = await downloadSVG(icon.name, family.id, icon.version)
+    const name = formatName(icon.name, family.postfix, filled)
+
+    const svg = await downloadSVG(icon.name, family.id, filled)
 
     console.log(`Downloading ${name}`)
 
@@ -60,25 +68,27 @@ async function generateComponent(icon, family) {
       mapSVGToTemplate(name, svg),
     )
   } catch {
-    process.abort()
+    console.log('Error generating component for', icon.name)
+    //process.abort()
   }
 }
 
-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, version) {
+async function downloadSVG(icon, familyId, filled) {
+  const filledConfig = filled ? 'fill1' : 'default'
   const svg = await axios
     .get(
-      `https://fonts.gstatic.com/s/i/${familyId}/${icon}/v${version}/24px.svg`,
+      `https://fonts.gstatic.com/s/i/short-term/release/${familyId}/${icon}/${filledConfig}/24px.svg`,
     )
     .catch((err) => console.log(err))
 

src/Icon10k.tsx

@@ -2,25 +2,9 @@ import React from 'react'
 import { IconProps } from './types'
 
 const Icon10kOutlined: React.FC<IconProps> = ({ ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    enableBackground="new 0 0 24 24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
     {props.title && <title>{props.title}</title>}
-    <g>
-      <rect fill="none" height="24" width="24" />
-    </g>
-    <g>
-      <g>
-        <g>
-          <path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,9v6v4H5v-8.5h1V15h1.5V9H5V5 h14V9z" />
-          <polygon points="15.5,11.25 15.5,9 14,9 14,15 15.5,15 15.5,12.75 17.25,15 19,15 16.75,12 19,9 17.25,9" />
-          <path d="M9.5,15H12c0.55,0,1-0.45,1-1v-4c0-0.55-0.45-1-1-1H9.5c-0.55,0-1,0.45-1,1v4C8.5,14.55,8.95,15,9.5,15z M10,10.5h1.5v3 H10V10.5z" />
-        </g>
-      </g>
-    </g>
+    <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-60Zm157 60h60v-90l70 90h73l-93-120 93-120h-73l-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-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
   </svg>
 )
 

src/Icon10kOutlined.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/Icon10kOutlinedFilled.tsx

@@ -2,19 +2,9 @@ import React from 'react'
 import { IconProps } from './types'
 
 const Icon10kRounded: React.FC<IconProps> = ({ ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    enableBackground="new 0 0 24 24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
     {props.title && <title>{props.title}</title>}
-    <g>
-      <rect fill="none" height="24" width="24" />
-    </g>
-    <g>
-      <path d="M10,10.5h1.5v3H10V10.5z M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M6.75,15 L6.75,15C6.34,15,6,14.66,6,14.25V10.5H5.25c-0.41,0-0.75-0.34-0.75-0.75v0C4.5,9.34,4.84,9,5.25,9H6.5c0.55,0,1,0.45,1,1v4.25 C7.5,14.66,7.16,15,6.75,15z M13,14c0,0.55-0.45,1-1,1H9.5c-0.55,0-1-0.45-1-1v-4c0-0.55,0.45-1,1-1H12c0.55,0,1,0.45,1,1V14z M17.59,15L17.59,15c-0.22,0-0.42-0.1-0.55-0.27l-1.54-1.98v1.5c0,0.41-0.34,0.75-0.75,0.75h0C14.34,15,14,14.66,14,14.25v-4.5 C14,9.34,14.34,9,14.75,9h0c0.41,0,0.75,0.34,0.75,0.75v1.5l1.54-1.98C17.17,9.1,17.38,9,17.59,9l0,0c0.58,0,0.91,0.66,0.56,1.12 L16.75,12l1.41,1.88C18.5,14.34,18.17,15,17.59,15z" />
-    </g>
+    <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-60Zm217-30 61 79q2 3 23 11 18 0 26-16.5t-3-30.5l-57-73 57-74q11-14 3-30t-26-16q-7 0-13 3t-10 8l-61 79v-60q0-13-8.5-21.5T587-600q-13 0-21.5 8.5T557-570v180q0 13 8.5 21.5T587-360q13 0 21.5-8.5T617-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-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
   </svg>
 )
 

src/Icon10kRounded.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/Icon10kRoundedFilled.tsx

@@ -2,19 +2,9 @@ import React from 'react'
 import { IconProps } from './types'
 
 const Icon10kSharp: React.FC<IconProps> = ({ ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    enableBackground="new 0 0 24 24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" {...props}>
     {props.title && <title>{props.title}</title>}
-    <g>
-      <rect fill="none" height="24" width="24" />
-    </g>
-    <g>
-      <path d="M10,10.5h1.5v3H10V10.5z M21,3H3v18h18V3z M7.5,15H6v-4.5H4.5V9h3V15z M13,9v6H8.5V9H13z M19,15h-1.75l-1.75-2.25V15H14V9 h1.5v2.25L17.25,9H19l-2.25,3L19,15z" />
-    </g>
+    <path d="M240-360h60v-240H200v60h40v180Zm100 0h180v-240H340v240Zm60-60v-120h60v120h-60Zm157 60h60v-90l70 90h73l-93-120 93-120h-73l-70 90v-90h-60v240ZM120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z" />
   </svg>
 )
 

src/Icon10kSharp.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 }