docs: iconfont (#5757)

2024-12-03 12:18:40 +08:00 · 2024-05-22 10:22:49 +08:00 · 2024-05-22 10:22:49 +08:00 · 3b1bef3dd2
commit 3b1bef3dd2
parent a31abe4c9e
3 changed files with 167 additions and 1 deletions
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@ -379,6 +379,10 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
    );
  }

+  protected drawIconShape(attributes: Required<S>, container: Group): void {
+    this.upsert('icon', Icon, this.getIconStyle(attributes), container);
+  }
+
  protected drawBadgeShapes(attributes: Required<S>, container: Group): void {
    const badgesStyle = this.getBadgesStyle(attributes);
    Object.keys(badgesStyle).forEach((key) => {
@ -414,7 +418,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
    this.drawHaloShape(attributes, container);

    // 3. icon
-    this.upsert('icon', Icon, this.getIconStyle(attributes), container);
+    this.drawIconShape(attributes, container);

    // 4. badges
    this.drawBadgeShapes(attributes, container);
--- a/packages/site/docs/manual/further-reading/iconfont.en.md
+++ b/packages/site/docs/manual/further-reading/iconfont.en.md
@ -0,0 +1,81 @@
+---
+title: Using Iconfont
+order: 3
+---
+
+## Overview
+
+Why use iconfont? It offers great compatibility, a wide variety of icons, and multicolor options. For more details, please visit the [Alibaba Iconfont Platform](https://www.iconfont.cn).
+
+![iconfont](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*rJ3lQa0HR-wAAAAAAAAAAABkARQnAQ)
+
+## Usage
+
+### Download Font Icons
+
+First, you need to download the desired font icons from the [iconfont](https://www.iconfont.cn) website. Create a project, select the required icons, and then download the generated icon files.
+
+### Add Font Icons
+
+After downloading, place the directory containing the icon font files (typically including `.eot`, `.woff`, `.ttf`, and `.svg` files, as well as the `iconfont.css` stylesheet) into your project.
+
+You can choose how to include them. Below is an example of how to include them in HTML:
+
+```html
+<head>
+  <style>
+    @import 'path-to-iconfont/iconfont.css';
+  </style>
+</head>
+```
+
+### Using the Font
+
+```js
+{
+  node: {
+    style: {
+      iconFontFamily: 'iconfont', // Corresponds to the `font-family` value in iconfont.css
+      iconText: '\ue7f1', // Corresponds to the `content` value in iconfont.css, make sure to add `u`
+      iconFill: '#7863FF'
+    }
+  }
+}
+```
+
+### Utility Function `getIcon()`
+
+To make it easier to retrieve icons, you can create a utility function `getIcon`. This function reads the icon information from the `iconfont.json` file and returns the corresponding Unicode character. Note that manually concatenating Unicode (`\\u${icon.unicode}`) won't work. Refer to [MDN String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint) for details.
+
+First, ensure you have an `iconfont.json` file containing the detailed icon information.
+
+```js
+import fonts from 'path-to-iconfont/iconfont.json';
+
+const icons = fonts.glyphs.map((icon) => {
+  return {
+    name: icon.font_class,
+    unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`,
+  };
+});
+
+const getIcon = (type) => {
+  const matchIcon = icons.find((icon) => {
+    return icon.name === type;
+  }) || { unicode: '', name: 'default' };
+  return matchIcon.unicode;
+};
+```
+
+Use it in your project:
+
+```js
+{
+  node: {
+    style: {
+      iconFontFamily: "iconfont",
+      iconText: getIcon('logo')
+    }
+  }
+}
+```
--- a/packages/site/docs/manual/further-reading/iconfont.zh.md
+++ b/packages/site/docs/manual/further-reading/iconfont.zh.md
@ -0,0 +1,81 @@
+---
+title: 使用 iconfont
+order: 3
+---
+
+## 概述
+
+为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步 [阿里巴巴-iconfont 平台](https://www.iconfont.cn)。
+
+![iconfont](https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*rJ3lQa0HR-wAAAAAAAAAAABkARQnAQ)
+
+## 使用
+
+### 下载字体图标
+
+首先，你需要从 [iconfont](https://www.iconfont.cn) 网站下载所需的图标字体。创建一个项目并选择所需的图标，然后下载生成的图标文件。
+
+### 添加字体图标
+
+下载完成后，将包含图标字体文件的目录（通常包括 `.eot`、`.woff`、`.ttf` 和 `.svg` 文件，以及 `iconfont.css` 样式文件）放入你的项目中。
+
+引入方式可自行选择，下面为在 HTML 中引入的例子：
+
+```html
+<head>
+  <style>
+    @import 'path-to-iconfont/iconfont.css';
+  </style>
+</head>
+```
+
+### 使用字体
+
+```js
+{
+  node: {
+    style: {
+      iconFontFamily: 'iconfont', // 对应 iconfont.css 中的 `font-family` 属性值
+      iconText: '\ue7f1', // 对应 iconfont.css 中的 `content` 属性值，注意加 `u`
+      iconFill: '#7863FF'
+    }
+  }
+}
+```
+
+### 工具函数 `getIcon()`
+
+为了更方便地获取图标，可以创建一个工具函数 `getIcon`。该函数会从图标文件 `iconfont.json` 中读取图标信息并返回相应的 Unicode 字符。这里注意，手动拼接 unicode 是不行的（`\\u${icon.unicode}`）。详细参考 [MDN String.fromCodePoint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint)。
+
+首先，确保你有一个 `iconfont.json` 文件，包含图标的详细信息。
+
+```js
+import fonts from 'path-to-iconfont/iconfont.json';
+
+const icons = fonts.glyphs.map((icon) => {
+  return {
+    name: icon.font_class,
+    unicode: String.fromCodePoint(icon.unicode_decimal), // `\\u${icon.unicode}`,
+  };
+});
+
+const getIcon = (type: string) => {
+  const matchIcon = icons.find((icon) => {
+    return icon.name === type;
+  }) || { unicode: '', name: 'default' };
+  return matchIcon.unicode;
+};
+```
+
+在项目中使用：
+
+```js
+{
+  node: {
+    style: {
+      iconFontFamily: "iconfont",
+      iconText: getIcon('logo')
+    }
+  }
+}
+```