From e3b7ed997e09cbf319ab5a75bc5341147818ca85 Mon Sep 17 00:00:00 2001
From: nemo-shen <kienshin626@gmail.com>
Date: Sun, 20 Jun 2021 20:43:48 +0800
Subject: [PATCH] docs(Icon): add custom iconfont (#4283)

---
 packages/icon/README.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/icon/README.md b/packages/icon/README.md
index 9f4b9c61..a593d677 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -51,6 +51,31 @@
 <van-icon name="chat" size="50px" />
 ```
 
+### 自定义图标
+
+如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 `app.wxss` 文件中引入。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 my-icon -->
+<van-icon class-prefix="my-icon" name="extra" />
+```
+
 ## 常见问题
 
 ### 开发者工具上提示 Failed to load font 是什么情况？