feat(theme): allow adding images as icons in features section (#188)

* feat(theme): allow adding images as icons in features section

* Update home-page.md

* Update home-page.md

docs/en/guide/home-page.md

@@ -1,4 +1,4 @@
-# Home 页面
+# Home Page
 
 Island.js default theme has a built-in Home page, you can configure it by writing markdown Front Matter. Take a simple example:
 
@@ -81,8 +81,12 @@ export interface Feature {
   // Feature details
   details: string;
   // Feature icon, usually emoji
-  icon: string;
+  icon: FeatureIcon;
 }
+
+export type FeatureIcon =
+    | string
+    | { src: string; alt?: string; width?: string; height: string };
 ```
 
 For example:
@@ -98,7 +102,8 @@ features:
   icon: 📦
 - title: 'Islands Arch: The higher performance in production'
   details: Designed to be islands architecture, means less javascript bundle, partial hydration and better performance about FCP, TTI.
-  icon: ✨
+  icon:
+    src: /islands-arch-feature-icon.svg
 ```
 
 ## Footer

docs/zh/guide/home-page.md

@@ -1,6 +1,6 @@
-# Home 主页
+# 主页
 
-Island.js 默认主题内置了 Home 页面，你可以通过书写 markdown 的 Front Matter 来配置它。举个简单的例子：
+Island.js 默认主题内置了主页，你可以通过书写 markdown 的 Front Matter 来配置它。举个简单的例子：
 
 ```md
 ---
@@ -12,11 +12,11 @@ hero:
 ---
 ```
 
-首先你需要将 `pageType` 设为 `home`，这样 Island.js 会自动为你生成 Home 页面。除了 `pageType`，你还可以配置 `hero` 和 `features` 两个部分。
+首先你需要将 `pageType` 设为 `home`，这样 Island.js 会自动为你生成主页。除了 `pageType`，你还可以配置 `hero` 和 `features` 两个部分。
 
-## hero
+## 开屏
 
-`hero` 部分是 Home 页面的 Logo、简介及跳转按钮部分，它的配置是一个对象，有以下类型：
+开屏部分是主页的 Logo、简介及跳转按钮部分，它的配置是一个对象，有以下类型：
 
 ```ts
 export interface Hero {
@@ -70,9 +70,9 @@ hero:
 ---
 ```
 
-## features
+## 特性
 
-`features` 部分是 Home 页面的特性介绍部分，它的配置是一个数组，每个元素有以下类型：
+特性部分是主页的特性介绍部分，它的配置是一个数组，每个元素有以下类型：
 
 ```ts
 export interface Feature {
@@ -81,8 +81,12 @@ export interface Feature {
   // Feature 详细介绍
   details: string;
   // Feature 图标，一般为 emoji
-  icon: string;
+  icon: FeatureIcon;
 }
+
+export type FeatureIcon =
+    | string
+    | { src: string; alt?: string; width?: string; height: string };
 ```
 
 举个例子:
@@ -98,12 +102,13 @@ features:
   icon: 📦
 - title: 'Islands Arch: The higher performance in production'
   details: Designed to be islands architecture, means less javascript bundle, partial hydration and better performance about FCP, TTI.
-  icon: ✨
+  icon:
+    src: /islands-arch-feature-icon.svg
 ```
 
 ## 页脚
 
-你可以通过 `themeConfig.footer` 来自定义 Home 页面的页脚。它的配置是一个对象，有以下类型：
+你可以通过 `themeConfig.footer` 来自定义主页的页脚。它的配置是一个对象，有以下类型：
 
 ```ts
 export interface Footer {

packages/island/src/shared/types/default-theme.ts

@@ -132,6 +132,10 @@ export namespace DefaultTheme {
   // image -----------------------------------------------------------------------
   export type Image = string | { src: string; alt?: string };
 
+  export type FeatureIcon =
+    | string
+    | { src: string; alt?: string; width?: string; height: string };
+
   // sidebar -------------------------------------------------------------------
   export interface Sidebar {
     [path: string]: SidebarGroup[];

packages/island/src/shared/types/index.ts

@@ -122,7 +122,7 @@ export interface Hero {
 }
 
 export interface Feature {
-  icon: string;
+  icon: DefaultTheme.FeatureIcon;
   title: string;
   details: string;
 }

packages/island/src/theme-default/components/HomeFeatures/index.tsx

@@ -1,5 +1,6 @@
 import styles from './index.module.scss';
 import { useFrontmatter } from '../../logic';
+import { Image } from '../Image';
 
 const getGridClass = (count?: number) => {
   if (!count) {
@@ -50,7 +51,16 @@ export function HomeFeature() {
                 bg="gray-light-4 dark:bg-default"
                 rounded="md"
               >
-                {icon}
+                {typeof icon === 'string' ? (
+                  icon
+                ) : (
+                  <Image
+                    image={icon}
+                    alt={icon.alt}
+                    width={icon.width}
+                    height={icon.height}
+                  />
+                )}
               </div>
               <h2 font="bold">{title}</h2>
               <p pt="2" text="sm text-2" font="medium" leading-6="">

packages/island/src/theme-default/components/Image/index.module.scss

@@ -0,0 +1,3 @@
+.image {
+  vertical-align: top;
+}

packages/island/src/theme-default/components/Image/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DefaultTheme } from 'shared/types/default-theme';
+import styles from './index.module.scss';
+import { withBase } from '@runtime';
+
+interface ImageProps {
+  image: DefaultTheme.Image;
+  alt?: string;
+  width?: string;
+  height: string;
+}
+
+export function Image(props: ImageProps) {
+  const { image, alt, width, height } = props;
+
+  return React.createElement('img', {
+    className: styles.image,
+    src: withBase(typeof image === 'string' ? image : image.src),
+    alt: alt ?? (typeof image === 'string' ? '' : image.alt || ''),
+    width,
+    height
+  });
+}