Skip to content
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

Jump to bottom

docs: add Icons rendering section #2217

Merged
merged 1 commit into from
Feb 23, 2024
Merged

docs: add Icons rendering section #2217

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 14 additions & 0 deletions site/content/docs/5.3/extend/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,20 @@ Please refer to the Solaris icons library [usage documentation]({{< param icons_

They are not open-source though and should only be used for Orange projects. Please refer to the [icons license file]({{< param icons_license >}}) for legal information.

## Icons rendering

Icons are designed within a square layout to preserve consistency. Within this square, there exists a designated safety zone to guarantee that icons can be used in various sizes and contexts while maintaining alignment as intended by the designers. The dimensions of the icons encompass this safety zone, ensuring adaptability and consistency across diverse applications.

<svg width="8em" height="8em" class="bg-body-secondary" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#info"/>
</svg>
<svg width="8em" height="8em" class="bg-body-secondary" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
</svg>
<svg width="8em" height="8em" class="bg-body-secondary" aria-hidden="true" focusable="false">
<use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick"/>
</svg>

## Use Solaris icons

There are many ways to use Solaris icons in a web page:
Expand Down
Loading