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.
OptionDescriptionTypeDefaulticonsAll icons listed in the array are loaded from the CDN.({{this.iconNames}})[]['arrowHeadRight']cdnDecides from which CDN the resources are loaded.'auto' | 'cn''auto'formatDefines 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.
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!
prev
next
<!-- 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>
