Porsche Design System

Icon Links

Table of Contents

Supported options
Examples

Function name: getIconLinks()

Porsche Design System icons are loaded dynamically from a CDN as soon as they are used for the first time. This results in a waterfall like loading behaviour where your application is bootstrapped first, then loads the Porsche Design System Core and when any icon is rendered the corresponding icon is loaded afterwards. This can be optimized by prefetching used icons in parallel while the application is being bootstrapped. Keep in mind that prefetching is not yet supported on Safari and Safari on iOS, so you will not see a performance benefit there. Current prefetch status on CanIUse

Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected into the <head> of your index.html.

Supported options#

Option

Description

Type

Default

icons

All icons listed in the array are loaded from the CDN.

({{this.iconNames}})[]

['arrowHeadRight']

cdn

Decides from which CDN the resources are loaded.

'auto' | 'cn'

'auto'

format

Defines the output format of the partial. By default, it returns a html string, with jsx it returns valid jsx elements. When using the js option a javascript object is returned.

'html' | 'jsx' | 'js'

'html'

When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included.

Examples#

Project integration differs based on the project setup. The following showcases the most common ways.

Note: Make sure to preload only icons which are really needed initially!

<!-- index.html -->
<head>
  <!--PLACEHOLDER_ICON_LINKS-->
</head>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getIconLinks({ icons: [\"arrow-head-right\", \"plus\"] }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: Force using China CDN -->
  "replace": "placeholder='<!--PLACEHOLDER_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getIconLinks({ icons: [\"arrow-head-right\", \"plus\"], cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<link rel=prefetch href=https://cdn.ui.porsche.com/porsche-design-system/icons/arrow-head-right.304b330.svg as=image type=image/svg+xml crossorigin>
<link rel=prefetch href=https://cdn.ui.porsche.com/porsche-design-system/icons/plus.319993e.svg as=image type=image/svg+xml crossorigin>

// Alternative: Force using China CDN
<link rel=prefetch href=https://cdn.ui.porsche.cn/porsche-design-system/icons/arrow-head-right.304b330.svg as=image type=image/svg+xml crossorigin>
<link rel=prefetch href=https://cdn.ui.porsche.cn/porsche-design-system/icons/plus.319993e.svg as=image type=image/svg+xml crossorigin>