Skip to content

Commit

Permalink
use symbols instead of icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@mollpo
mollpo committed Sep 3, 2024
1 parent 6057ad9 commit 99a75ce
Show file tree
Hide file tree
Showing 15,024 changed files with 60,330 additions and 139,952 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
38 changes: 25 additions & 13 deletions generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,23 @@ 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 getIncludedFamilies = (families) => {
const notIncludedFamilies = families.map((family) =>
family.replace(/\s+/g, '').toLowerCase(),
)
return ICON_FAMILIES.filter(
(family) => !notIncludedFamilies.includes(family.id),
)
}

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.
]
Expand All @@ -27,7 +35,7 @@ const ignoredIcons = [
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])
}
})()

Expand All @@ -43,15 +51,18 @@ 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 generateComponent(icon, families[i])
}
}

async function generateComponent(icon, family) {
try {
const name = formatName(icon.name, family.postfix)
const svg = await downloadSVG(icon.name, family.id, icon.version)

const svg = await downloadSVG(icon.name, family.id)

console.log(`Downloading ${name}`)

Expand All @@ -60,7 +71,8 @@ async function generateComponent(icon, family) {
mapSVGToTemplate(name, svg),
)
} catch {
process.abort()
console.log('Error generating component for', icon.name)
//process.abort()
}
}

Expand All @@ -75,10 +87,10 @@ function formatName(string, familyPostfix) {
return 'Icon' + formattedString + familyPostfix
}

async function downloadSVG(icon, familyId, version) {
async function downloadSVG(icon, familyId) {
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}/default/24px.svg`,
)
.catch((err) => console.log(err))

Expand Down
12 changes: 0 additions & 12 deletions src/Icon10k.tsx
View file

This file was deleted.

20 changes: 2 additions & 18 deletions src/Icon10kOutlined.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
14 changes: 2 additions & 12 deletions src/Icon10kRounded.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
14 changes: 2 additions & 12 deletions src/Icon10kSharp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)

Expand Down
31 changes: 0 additions & 31 deletions src/Icon10kTwoTone.tsx
View file

This file was deleted.

12 changes: 0 additions & 12 deletions src/Icon10mp.tsx
View file

This file was deleted.

30 changes: 2 additions & 28 deletions src/Icon10mpOutlined.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,9 @@ import React from 'react'
import { IconProps } from './types'

const Icon10mpOutlined: 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="M13,11.5h2.5c0.55,0,1-0.45,1-1v-4c0-0.55-0.45-1-1-1H13c-0.55,0-1,0.45-1,1v4C12,11.05,12.45,11.5,13,11.5z M13.5,7H15 v3h-1.5V7z" />
</g>
<g>
<path d="M7.5,14h1v3H10v-3h1v4.5h1.5v-5c0-0.55-0.45-1-1-1H7c-0.55,0-1,0.45-1,1v5h1.5V14z" />
</g>
<g>
<polygon points="8.5,11.5 10,11.5 10,5.5 7,5.5 7,7 8.5,7" />
</g>
<g>
<path d="M13.5,18.5H15V17h2c0.55,0,1-0.45,1-1v-2.5c0-0.55-0.45-1-1-1h-3.5V18.5z M15,14h1.5v1.5H15V14z" />
</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,19H5V5h14V19z" />
</g>
</g>
</g>
<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-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
</svg>
)

Expand Down
16 changes: 2 additions & 14 deletions src/Icon10mpRounded.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,9 @@ import React from 'react'
import { IconProps } from './types'

const Icon10mpRounded: 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>
<path d="M13.5,7H15v3h-1.5V7z 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 M11.75,18.5 L11.75,18.5c-0.41,0-0.75-0.34-0.75-0.75V14h-1v2.25C10,16.66,9.66,17,9.25,17h0c-0.41,0-0.75-0.34-0.75-0.75V14h-1v3.75 c0,0.41-0.34,0.75-0.75,0.75h0C6.34,18.5,6,18.16,6,17.75V13.5c0-0.55,0.45-1,1-1h4.5c0.55,0,1,0.45,1,1v4.25 C12.5,18.16,12.16,18.5,11.75,18.5z M14.25,18.5L14.25,18.5c-0.41,0-0.75-0.34-0.75-0.75V13.5c0-0.55,0.45-1,1-1H17 c0.55,0,1,0.45,1,1V16c0,0.55-0.45,1-1,1h-2v0.75C15,18.16,14.66,18.5,14.25,18.5z M10,6.5v4.25c0,0.41-0.34,0.75-0.75,0.75h0 c-0.41,0-0.75-0.34-0.75-0.75V7H7.75C7.34,7,7,6.66,7,6.25v0C7,5.84,7.34,5.5,7.75,5.5H9C9.55,5.5,10,5.95,10,6.5z M16.5,10.5 c0,0.55-0.45,1-1,1H13c-0.55,0-1-0.45-1-1v-4c0-0.55,0.45-1,1-1h2.5c0.55,0,1,0.45,1,1V10.5z M15,14h1.5v1.5H15V14z" />
</g>
</g>
<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-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Zm100 360h40v90q0 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>
)

Expand Down
16 changes: 2 additions & 14 deletions src/Icon10mpSharp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,9 @@ import React from 'react'
import { IconProps } from './types'

const Icon10mpSharp: 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>
<path d="M13.5,7H15v3h-1.5V7z M21,3H3v18h18V3z M12.5,18.5H11V14h-1v3H8.5v-3h-1v4.5H6v-6h6.5V18.5z M15,18.5h-1.5v-6H18V17h-3 V18.5z M10,5.5v6H8.5V7H7V5.5H10z M16.5,5.5v6H12v-6H16.5z M15,14h1.5v1.5H15V14z" />
</g>
</g>
<path d="M340-500h60v-240H280v60h60v180Zm140 0h180v-240H480v240Zm60-60v-120h60v120h-60ZM240-220h60v-180h40v120h60v-120h40v180h60v-240H240v240Zm300 0h60v-60h120v-180H540v240Zm60-120v-60h60v60h-60ZM120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z" />
</svg>
)

Expand Down
46 changes: 0 additions & 46 deletions src/Icon10mpTwoTone.tsx
View file

This file was deleted.

12 changes: 0 additions & 12 deletions src/Icon11mp.tsx
View file

This file was deleted.

30 changes: 2 additions & 28 deletions src/Icon11mpOutlined.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,9 @@ import React from 'react'
import { IconProps } from './types'

const Icon11mpOutlined: 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="M7.5,14h1v3H10v-3h1v4.5h1.5v-5c0-0.55-0.45-1-1-1H7c-0.55,0-1,0.45-1,1v5h1.5V14z" />
</g>
<g>
<path d="M13.5,18.5H15V17h2c0.55,0,1-0.45,1-1v-2.5c0-0.55-0.45-1-1-1h-3.5V18.5z M15,14h1.5v1.5H15V14z" />
</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,19H5V5h14V19z" />
</g>
<g>
<polygon points="9.5,11.5 11,11.5 11,5.5 8,5.5 8,7 9.5,7" />
</g>
<g>
<polygon points="14.5,11.5 16,11.5 16,5.5 13,5.5 13,7 14.5,7" />
</g>
</g>
</g>
<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-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z" />
</svg>
)

Expand Down
Loading

0 comments on commit 99a75ce

Please sign in to comment.