Replace icon components with string identifiers in various opengraph-image files

1aron · 1aron · commit 874bd9b15c3c · 2025-04-23T13:49:34.000+08:00
diff --git a/site/app/[locale]/blog/bootstrapping-master-css-with-vite/opengraph-image.tsx b/site/app/[locale]/blog/bootstrapping-master-css-with-vite/opengraph-image.tsx
@@ -13,5 +13,5 @@ export default (props: Props) => create({
     props,
     metadata,
     dictionaries,
-    icon: <Icon width="192" />
+    icon: 'vite'
 })
diff --git a/site/app/[locale]/guide/code-linting/angular/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/angular/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/angular.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="180" />,
+    icon: 'angular',
 })
diff --git a/site/app/[locale]/guide/code-linting/html/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/html/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/icons/html.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="192" />
+    icon: 'html'
 })
diff --git a/site/app/[locale]/guide/code-linting/laravel/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/laravel/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/laravel.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="192" />
+    icon: 'laravel',
 })
diff --git a/site/app/[locale]/guide/code-linting/page.tsx b/site/app/[locale]/guide/code-linting/page.tsx
@@ -10,7 +10,7 @@ export const { Page, dynamic, revalidate, generateMetadata } = createPage({
     dictionaries,
     categories,
     noTOC: true,
-    icon: <ESLintSvg width={90} />,
+    icon: 'eslint',
     content: import('./content.mdx'),
     Layout,
 })
diff --git a/site/app/[locale]/guide/code-linting/react/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/react/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/react.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="192" />
+    icon: 'react'
 })
diff --git a/site/app/[locale]/guide/code-linting/svelte/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/svelte/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/svelte.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="192" />
+    icon: 'svelte'
 })
diff --git a/site/app/[locale]/guide/code-linting/vscode/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/vscode/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/icons/visualstudiocode.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Master CSS ESLint',
-    icon: <Icon width="164" />
+    icon: 'vscode'
 })
diff --git a/site/app/[locale]/guide/code-linting/vuejs/opengraph-image.tsx b/site/app/[locale]/guide/code-linting/vuejs/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/vuejs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -13,5 +12,5 @@ export default (props: Props) => create({
     props,
     metadata,
     dictionaries,
-    icon: <Icon width="192" />
+    icon: 'vuejs'
 })
diff --git a/site/app/[locale]/guide/installation/angular/opengraph-image.tsx b/site/app/[locale]/guide/installation/angular/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/angular.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Progressive Rendering',
-    icon: <Icon width="180" />
+    icon: 'angular'
 })
diff --git a/site/app/[locale]/guide/installation/angular/runtime-rendering/opengraph-image.tsx b/site/app/[locale]/guide/installation/angular/runtime-rendering/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/angular.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="180" />
+    icon: 'angular'
 })
diff --git a/site/app/[locale]/guide/installation/angular/static-extraction/opengraph-image.tsx b/site/app/[locale]/guide/installation/angular/static-extraction/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/angular.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Static Extraction',
-    icon: <Icon width="180" />
+    icon: 'angular'
 })
diff --git a/site/app/[locale]/guide/installation/astro/opengraph-image.tsx b/site/app/[locale]/guide/installation/astro/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/astro.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="256" />
+    icon: 'astro'
 })
diff --git a/site/app/[locale]/guide/installation/blazor/opengraph-image.tsx b/site/app/[locale]/guide/installation/blazor/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/blazor.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="256" />
+    icon: 'blazor'
 })
diff --git a/site/app/[locale]/guide/installation/laravel/opengraph-image.tsx b/site/app/[locale]/guide/installation/laravel/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/laravel.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="192" />
+    icon: 'laravel'
 })
diff --git a/site/app/[locale]/guide/installation/nextjs/opengraph-image.tsx b/site/app/[locale]/guide/installation/nextjs/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/nextjs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Progressive Rendering',
-    icon: <Icon width="256" />,
+    icon: 'nextjs'
 })
diff --git a/site/app/[locale]/guide/installation/nextjs/runtime-rendering/opengraph-image.tsx b/site/app/[locale]/guide/installation/nextjs/runtime-rendering/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/nextjs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="256" />
+    icon: 'nextjs'
 })
diff --git a/site/app/[locale]/guide/installation/nextjs/static-extraction/opengraph-image.tsx b/site/app/[locale]/guide/installation/nextjs/static-extraction/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/nextjs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Static Extraction',
-    icon: <Icon width="256" />,
+    icon: 'nextjs'
 })
diff --git a/site/app/[locale]/guide/installation/nuxtjs/opengraph-image.tsx b/site/app/[locale]/guide/installation/nuxtjs/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/nuxtjs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Progressive Rendering',
-    icon: <Icon width="228" />
+    icon: 'nuxtjs',
 })
diff --git a/site/app/[locale]/guide/installation/react/opengraph-image.tsx b/site/app/[locale]/guide/installation/react/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/react.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="192" />
+    icon: 'react'
 })
diff --git a/site/app/[locale]/guide/installation/svelte/opengraph-image.tsx b/site/app/[locale]/guide/installation/svelte/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/svelte.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Progressive Rendering',
-    icon: <Icon width="192" />
+    icon: 'svelte'
 })
diff --git a/site/app/[locale]/guide/installation/vite/opengraph-image.tsx b/site/app/[locale]/guide/installation/vite/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/build-tools/vite.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="192" />
+    icon: 'vite'
 })
diff --git a/site/app/[locale]/guide/installation/vuejs/opengraph-image.tsx b/site/app/[locale]/guide/installation/vuejs/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/frameworks/vuejs.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="192" />
+    icon: 'vuejs'
 })
diff --git a/site/app/[locale]/guide/installation/webpack/opengraph-image.tsx b/site/app/[locale]/guide/installation/webpack/opengraph-image.tsx
@@ -2,7 +2,6 @@ import { Props } from 'internal/types/Props'
 import create from 'internal/utils/og-image'
 import dictionaries from '~/site/dictionaries'
 import metadata from './metadata'
-import Icon from '~/site/public/images/build-tools/webpack.svg'
 import type { AbsoluteTemplateString } from 'next/dist/lib/metadata/types/metadata-types'
 
 export const alt = (metadata.title as AbsoluteTemplateString)?.absolute || metadata.title as string
@@ -14,5 +13,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Runtime Rendering',
-    icon: <Icon width="256" />
+    icon: 'webpack'
 })
diff --git a/site/app/[locale]/guide/migration/styled-components/opengraph-image.tsx b/site/app/[locale]/guide/migration/styled-components/opengraph-image.tsx
@@ -14,5 +14,5 @@ export default (props: Props) => create({
     metadata,
     dictionaries,
     title: 'Styled Components',
-    icon: <Icon width={216} height={216} alt="styled components" />
+    icon: 'styled-components'
 })
diff --git a/site/app/[locale]/guide/migration/tailwindcss/content.mdx b/site/app/[locale]/guide/migration/tailwindcss/content.mdx
@@ -1,7 +1,7 @@
 ## Overview [sr-only]
 **Tailwind CSS** is a utility-first CSS framework that empowers you to select corresponding values for your requirements from a plethora of defined constraints, such as `text-sm`, `pt-4`, `lg:w-9`, and more.
 
-**Master CSS** is a markup-driven CSS language with smart syntax that allows you to construct your user interface using structured and native-like syntax, such as `mcss font:14`, `mcss pt:16`, `mcss w:36@md`, instead of referencing tables or relying on memory.
+**Master CSS** is a markup-driven CSS language with smart syntax that allows you to construct your user interface using structured and native-like syntax, such as `mcss font:14`, `mcss pt:16`, `mcss w:36@md`.
 
 Our syntax concepts draw inspiration from [Sass](https://sass-lang.com) and [TypeScript](https://www.typescriptlang.org).
 
diff --git a/site/app/[locale]/guide/migration/tailwindcss/opengraph-image.tsx b/site/app/[locale]/guide/migration/tailwindcss/opengraph-image.tsx
