@scania/icons NPM

SDDS Icons package

Deprecation Notice

This package has been deprecated and is no longer actively maintained.

Why is this package deprecated?

This package has reached the end of its development lifecycle, and we have decided to discontinue active support and updates for it. We recommend that you consider alternative solutions for your project to ensure ongoing compatibility, security, and stability.

Recommended Alternatives

We suggest exploring the Tegel Design System, which is the successor of SDDS and is actively maintained:

@scania/tegel: One package for the entire Tegel design system. Based on web components.
@scania/tegel-react: Version of @scania/tegel that provides React component wrappers.
@scania/tegel-angular: Version of @scania/tegel that provides Angular component wrappers.

What should you do now?

Migrate to an alternative package: We strongly encourage you to transition to one of the recommended alternatives mentioned above by following their documentation and migration guides on npm, SDDS -> TDS migration guide and Tegel installation on the official Tegel website.
Remove the deprecated package: You can safely remove this package from your project once you have successfully migrated to an alternative solution.

Thank You!

We appreciate your support and use of this package. If you have any questions or need further assistance with the deprecation process or migration, feel free to reach out to us by creating an issue in our GitHub repository or contacting Development support channel in Teams.

Again, thank you for being a part of our community, and we hope the recommended alternatives serve your needs effectively.

*Last Updated: October 23rd 2023

There are 2 options to use icons package. You can use it as a module or as a webfont.

1. Use as a module with sdds-icon component

This is a good option if your application supports script bundling, and for example you need all resources to be offline or hosted in your own server. To install icons package as a module, install using npm.

npm i @scania/icons --save

The icons can be used with component from @scania/components. Make sure you have installed @scania/components in your application. The benefits of this method is that it will be dynamically loaded. This solution will enable module bundling tools such as webpack to do dynamic referencing only to the icons used in the application.

<sdds-icon name="scania-truck"></sdds-icon>

2. Webfont

All icons are available as font icons. Import the font CSS from Scania CDN in your CSS or HTML.

// in CSS
@import url('https://cdn.digitaldesign.scania.com/icons/dist/1.0.0/fonts/css/sdds-icons.css');

Or you can add it in the HTML inside <head>.

<head>
    <link rel="stylesheet" href="https://cdn.digitaldesign.scania.com/icons/dist/1.0.0/fonts/css/sdds-icons.css">
</head>

Then, you can use it as a class in your element. Do not forget to add 'sdds-icon' class before the icon name.

<i class="sdds-icon scania-arrow"></i>

Scania icons webfont is also available in the distribution of @scania/icons package. If you do not want to connect to Tegel Digital Design CDN, or, you want to go fully offline, you can use this solution. To be able to use it, you can refer to the CSS which is available under node_modules/@scania/icons

<head>
    <link rel="stylesheet" href="node_modules/@scania/icons/dist/fonts/css/sdds-icons.css">
</head>

@everything-registry/sub-chunk-811 @infinitebrahmanuniverse/nolb-_sca @zalastax/nolb-_sca

6 months ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago