Skip to content

Add detailed info regarding icon use #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 16, 2025
Merged

Add detailed info regarding icon use #454

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3b712a0
Update ui.rst
Sep 26, 2024
961d2c9
Update ui.rst
Sep 26, 2024
e8bfc42
Merge branch 'apache:main' into main
sbrueseke Nov 6, 2024
9840964
Update ui.rst
Nov 6, 2024
f574a9a
Merge branch 'apache:main' into main
sbrueseke Dec 9, 2024
2d52c40
Merge branch 'main' into main
DaanHoogland Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions source/adminguide/ui.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,19 +480,26 @@ Example for adding custom plugins:
plugins: [
{
"name": "ExamplePlugin",
"icon": "appstore",
"icon": "appstore-outlined",
"path": "example.html"
},
{
"name": "ExamplePlugin1",
"icon": "appstore",
"icon": "appstore-outlined",
"path": "https://cloudstack.apache.org/"
}
]
...
}

`icon` for the plugin can be chosen from Ant Design icons listed at `Icon - Ant Design Vue <https://www.antdv.com/components/icon/>`_.
`icon` for the plugin can be chosen from Ant Design icons listed at `https://3x.antdv.com/components/icon <https://3x.antdv.com/components/icon>`_.

.. warning::
Not all ant icons are supported at the moment. You will find a list of supported icons
within the github repository in ui/src/core/lazy_lib/icons_use.js. To use an icon you
need to transform the listed name. For example "PieChartOutlined" needs to be transformed
to "pie-chart-outlined", "ReadOutlined" needs to be tranformed to "read-outlined".

For displaying a custom HTML in the plugin, HTML file can be stored in the CloudStack management server's web application directory on the server, i.e., */usr/share/cloudstack-management/webapp* and `path` can be set to the name of the file. For displaying a service or a web page, URL can be set as the `path` of the plugin.

|ui-custom-plugin.png|
Expand Down
Loading