Skip to content

Commit 40e255a

Browse files
kmiitkmiit
authored
docs: Add icon preview in docs (#112)
* icon: Add a module to convert Compose ImageVector to SVG * docs: Add preview for icons * ci: Build icons for docs
1 parent 475190f commit 40e255a

File tree

9 files changed

+283
-87
lines changed

9 files changed

+283
-87
lines changed

‎.github/workflows/docs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ jobs:
3838
./gradlew :docs:demo:jsBrowserDistribution
3939
mkdir -p ./docs/public/compose
4040
mv ./docs/demo/build/dist/js/productionExecutable/* ./docs/public/compose
41+
./gradlew :docs:iconGen:generateSvg
42+
mv ./docs/iconGen/build/generated-svg/icons ./docs/public/icons
4143
cd ./docs
4244
yarn install
4345
yarn docs:build

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,4 @@ docs/.vitepress/dist
3636
docs/.vitepress/cache
3737
docs/public/dokka
3838
docs/public/compose
39+
docs/public/icons

‎docs/.vitepress/theme/style/img.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
td img {
2+
display: block;
3+
margin-left: auto;
4+
margin-right: auto;
5+
width: 24px;
6+
}

‎docs/.vitepress/theme/style/index.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import './var.css';
22
@import './blur.css';
3-
@import './hidden.css';
3+
@import './hidden.css';
4+
@import './img.css';

‎docs/guide/icons.md‎

Lines changed: 49 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -41,56 +41,62 @@ The Miuix icon system currently includes the following main categories:
4141

4242
Basic icons include commonly used basic UI elements such as arrows and checkmarks. These icons are also used in Miuix's own components. Below is the complete list:
4343

44-
- `Check`: Checkmark icon
45-
- `ArrowUpDown`: Up and down arrow icon
46-
- `ArrowUpDownIntegrated`: Integrated up and down arrow icon
47-
- `ArrowRight`: Right arrow icon
44+
| Preview | Icon Name | Description |
45+
|---------------------------------------------------------------------------|-------------------------|-----------------------------------|
46+
| <img src="/icons/basic/Check.svg" /> | `Check` | Checkmark icon |
47+
| <img src="/icons/basic/ArrowUpDown.svg" /> | `ArrowUpDown` | Up and down arrow icon |
48+
| <img src="/icons/basic/ArrowUpDownIntegrated.svg" style="width: 15px;" /> | `ArrowUpDownIntegrated` | Integrated up and down arrow icon |
49+
| <img src="/icons/basic/ArrowRight.svg" style="width: 15px;" /> | `ArrowRight` | Right arrow icon |
50+
| <img src="/icons/basic/Search.svg" /> | `Search` | Search icon |
51+
| <img src="/icons/basic/SearchCleanup.svg" /> | `SearchCleanup` | Search cleanup icon |
4852

4953
### Useful Icons
5054

5155
Useful icons include a large number of functional icons suitable for various application scenarios. Below is the complete list:
5256

53-
| Icon Name | Description | Common Usage |
54-
| ----------------- | ------------------------ | ------------------------------------ |
55-
| `AddSecret` | Add encrypted content | Add passwords, private items, etc. |
56-
| `Back` | Back icon | Navigate back to the previous screen |
57-
| `Blocklist` | Blocklist icon | Block users, add to blacklist |
58-
| `Cancel` | Cancel icon | Cancel operations, close dialogs |
59-
| `Copy` | Copy icon | Copy content to clipboard |
60-
| `Cut` | Cut icon | Cut content to clipboard |
61-
| `Delete` | Delete icon | Delete items, content, or files |
62-
| `Edit` | Edit icon | Edit content, modify information |
63-
| `ImmersionMore` | Immersive more options | Show more options in immersive mode |
64-
| `Info` | Info icon | Show detailed information, tips |
65-
| `Like` | Like icon | Like, favorite functionality |
66-
| `More` | More icon | Show more options or menus |
67-
| `Move` | Move icon | Move items to other locations |
68-
| `NavigatorSwitch` | Navigation switch icon | Switch navigation views |
69-
| `New` | New icon | Create new content, files, or items |
70-
| `Order` | Order icon | Sort content |
71-
| `Paste` | Paste icon | Paste content from clipboard |
72-
| `Personal` | Personal/user icon | Personal information, user page |
73-
| `Play` | Play icon | Play media content |
74-
| `Reboot` | Reboot icon | Restart app or system |
75-
| `Refresh` | Refresh icon | Refresh content or page |
76-
| `Remove` | Remove icon | Remove items (soft delete) |
77-
| `RemoveBlocklist` | Remove blocklist icon | Unblock |
78-
| `RemoveSecret` | Remove encrypted content | Remove encrypted items |
79-
| `Rename` | Rename icon | Rename files or items |
80-
| `Restore` | Restore icon | Restore deleted content |
81-
| `Save` | Save icon | Save content or changes |
82-
| `Scan` | Scan icon | Scan QR codes, etc. |
83-
| `Search` | Search icon | Search content |
84-
| `SelectAll` | Select all icon | Select all items |
85-
| `Settings` | Settings icon | App or system settings |
86-
| `Share` | Share icon | Share content to other platforms |
87-
| `Stick` | Stick icon | Pin content to the top |
88-
| `Unlike` | Unlike icon | Unlike or unfavorite |
89-
| `Unstick` | Unpin content | Unpin content |
90-
| `Update` | Update icon | Update apps or content |
57+
| Preview | Icon Name | Description | Common Usage |
58+
|-------------------------------------------------|-------------------|--------------------------|--------------------------------------|
59+
| <img src="/icons/useful/AddSecret.svg" /> | `AddSecret` | Add encrypted content | Add passwords, private items, etc. |
60+
| <img src="/icons/useful/Back.svg" /> | `Back` | Back icon | Navigate back to the previous screen |
61+
| <img src="/icons/useful/Blocklist.svg" /> | `Blocklist` | Blocklist icon | Block users, add to blacklist |
62+
| <img src="/icons/useful/Cancel.svg" /> | `Cancel` | Cancel icon | Cancel operations, close dialogs |
63+
| <img src="/icons/useful/Copy.svg" /> | `Copy` | Copy icon | Copy content to clipboard |
64+
| <img src="/icons/useful/Cut.svg" /> | `Cut` | Cut icon | Cut content to clipboard |
65+
| <img src="/icons/useful/Delete.svg" /> | `Delete` | Delete icon | Delete items, content, or files |
66+
| <img src="/icons/useful/Edit.svg" /> | `Edit` | Edit icon | Edit content, modify information |
67+
| <img src="/icons/useful/ImmersionMore.svg" /> | `ImmersionMore` | Immersive more options | Show more options in immersive mode |
68+
| <img src="/icons/useful/Info.svg" /> | `Info` | Info icon | Show detailed information, tips |
69+
| <img src="/icons/useful/Like.svg" /> | `Like` | Like icon | Like, favorite functionality |
70+
| <img src="/icons/useful/More.svg" /> | `More` | More icon | Show more options or menus |
71+
| <img src="/icons/useful/Move.svg" /> | `Move` | Move icon | Move items to other locations |
72+
| <img src="/icons/useful/NavigatorSwitch.svg" /> | `NavigatorSwitch` | Navigation switch icon | Switch navigation views |
73+
| <img src="/icons/useful/New.svg" /> | `New` | New icon | Create new content, files, or items |
74+
| <img src="/icons/useful/Order.svg" /> | `Order` | Order icon | Sort content |
75+
| <img src="/icons/useful/Paste.svg" /> | `Paste` | Paste icon | Paste content from clipboard |
76+
| <img src="/icons/useful/Personal.svg" /> | `Personal` | Personal/user icon | Personal information, user page |
77+
| <img src="/icons/useful/Play.svg" /> | `Play` | Play icon | Play media content |
78+
| <img src="/icons/useful/Reboot.svg" /> | `Reboot` | Reboot icon | Restart app or system |
79+
| <img src="/icons/useful/Refresh.svg" /> | `Refresh` | Refresh icon | Refresh content or page |
80+
| <img src="/icons/useful/Remove.svg" /> | `Remove` | Remove icon | Remove items (soft delete) |
81+
| <img src="/icons/useful/RemoveBlocklist.svg" /> | `RemoveBlocklist` | Remove blocklist icon | Unblock |
82+
| <img src="/icons/useful/RemoveSecret.svg" /> | `RemoveSecret` | Remove encrypted content | Remove encrypted items |
83+
| <img src="/icons/useful/Rename.svg" /> | `Rename` | Rename icon | Rename files or items |
84+
| <img src="/icons/useful/Restore.svg" /> | `Restore` | Restore icon | Restore deleted content |
85+
| <img src="/icons/useful/Save.svg" /> | `Save` | Save icon | Save content or changes |
86+
| <img src="/icons/useful/Scan.svg" /> | `Scan` | Scan icon | Scan QR codes, etc. |
87+
| <img src="/icons/useful/Search.svg" /> | `Search` | Search icon | Search content |
88+
| <img src="/icons/useful/SelectAll.svg" /> | `SelectAll` | Select all icon | Select all items |
89+
| <img src="/icons/useful/Settings.svg" /> | `Settings` | Settings icon | App or system settings |
90+
| <img src="/icons/useful/Share.svg" /> | `Share` | Share icon | Share content to other platforms |
91+
| <img src="/icons/useful/Stick.svg" /> | `Stick` | Stick icon | Pin content to the top |
92+
| <img src="/icons/useful/Unlike.svg" /> | `Unlike` | Unlike icon | Unlike or unfavorite |
93+
| <img src="/icons/useful/Unstick.svg" /> | `Unstick` | Unpin content | Unpin content |
94+
| <img src="/icons/useful/Update.svg" /> | `Update` | Update icon | Update apps or content |
9195

9296
### Other Icons
9397

9498
The "Other" category includes icons for specific scenarios.
9599

96-
- `GitHub`: GitHub icon
100+
| Preview | Icon Name | Description |
101+
|---------------------------------------|-----------|-------------|
102+
| <img src="/icons/other/GitHub.svg" /> | `GitHub` | GitHub icon |

‎docs/iconGen/build.gradle.kts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright 2025, miuix-kotlin-multiplatform contributors
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
plugins { kotlin("jvm") }
5+
6+
java { toolchain.languageVersion = JavaLanguageVersion.of(21) }
7+
8+
dependencies { implementation(project(":miuix")) }
9+
10+
val iconsSourceDir = rootProject.layout.projectDirectory.dir("miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/icon").asFile
11+
val outputDir = layout.buildDirectory.dir("generated-svg")
12+
13+
tasks.register<JavaExec>("generateSvg") {
14+
group = "iconGen"
15+
description = "Generate SVGs from Compose ImageVector definitions"
16+
dependsOn(tasks.named("classes"))
17+
classpath = sourceSets.main.get().runtimeClasspath
18+
mainClass.set("top.yukonga.miuix.docs.icongen.MainKt")
19+
val lightColor = project.findProperty("iconLightColor")?.toString() ?: "#000000"
20+
val darkColor = project.findProperty("iconDarkColor")?.toString() ?: "#FFFFFF"
21+
val preserve = project.findProperty("iconPreserveColors")?.toString()?.equals("true", true) == true
22+
outputs.dir(outputDir)
23+
doFirst { outputDir.get().asFile.mkdirs() }
24+
args = listOf(
25+
"--src", iconsSourceDir.absolutePath,
26+
"--out", outputDir.get().asFile.absolutePath,
27+
"--light", lightColor,
28+
"--dark", darkColor,
29+
"--preserve-colors", preserve.toString()
30+
)
31+
}

0 commit comments

Comments
 (0)