Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@fundamental-styles/fn-icons
Advanced tools
This package contains SVG Fiori icons. This is subpackage of main SAP/fundamental-styles repository. For icon list, demos and more detailed examples visit main repository demo.
In the package you will find raw SVG icons, generated sprite SVG and their counterpart style CSS files.
You can load separately, lazily, when they are needed in document.
Include @fundamental-styles/fn-icons/dist/fn-icons-independent.css
file in your document, and you are good to go.
Syntax for icons:
<span class="fn-icon fn-icon--{icon-name}"></span>
Replace {icon-name}
with desired icon name. To modify color and size of icon apply background-color
, width
and height
CSS properties.
Please take into account browser compatibility
when using this method. Styles are using mask-image
CSS property.
You can load every icon at once and also use SVG HTML tags to use them in your document.
Include @fundamental-styles/fn-icons/dist/fn-icons-sprite.css
file in your document for getting helper modifier
classes. Please take into account browser compatibility
when using this method.
Syntax for icons:
<svg class="fn-icon-sprite">
<use xlink:href="@fundamental-styles/fn-icons/dist/fiori-sprite.svg#{icon-name}"></use>
</svg>
Replace {icon-name}
with desired icon name. To modify color and size of icon apply fill
, width
and height
CSS properties or SVG attributes. By default, icons have size of 16X16 px and black color.
The fully compiled, minified library is available via unpkg CDN from version 0.21.0-rc.114
for inclusion in your application.
For prerelease
version use
For sprite CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@prerelease/dist/fn-icons-sprite.css' rel='stylesheet'>
For independent SVGs CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@prerelease/dist/fn-icons-independent.css' rel='stylesheet'>
For latest
stable version use
For sprite CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@latest/dist/fn-icons-sprite.css' rel='stylesheet'>
For independent SVGs CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@latest/dist/fn-icons-independent.css' rel='stylesheet'>
You can also include specific version of library into your HTML via using
For sprite CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@{versionNumber}/dist/fn-icons-sprite.css' rel='stylesheet'>
For independent SVGs CSS
<link href='https://unpkg.com/@fundamental-styles/fn-icons@{versionNumber}/dist/fn-icons-independent.css' rel='stylesheet'>
where you should replace {versionNumber}
with desired version number. For example with 0.24.4
When using CDN provided sprite variant, use
xlink:href="https://unpkg.com/@fundamental-styles/fn-icons/dist/fiori-sprite.svg#{icon-name}"
in use
tag
for getting sprite SVG.
0.30.0-rc.51 (2023-07-24)
FAQs
Fundamental Library Styles Next SVG Icons
The npm package @fundamental-styles/fn-icons receives a total of 0 weekly downloads. As such, @fundamental-styles/fn-icons popularity was classified as not popular.
We found that @fundamental-styles/fn-icons demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.