Meta Icons are a set of icons to be used for the following purposes: Favicon, Apple Touch Icons, Android Touch
Icons and Microsoft Windows Tiles. To simplify the implementation process we provide a getMetaTagsAndIconLinks
partial.
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.
This partial also provides some default Open Graph and Twitter meta tags which will display a thumbnail image when
sharing a link on social media. If you want to define your own information you can set the ogImage option to false.
OptionDescriptionTypeDefaultappTitleMandatory: Title of your app which will be reflected in the meta tag.stringundefinedcdnDecides 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'ogImageBoolean attribute to decide whether the Open Graph and Twitter meta tags should be included.booleantrue
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.
prev
next
<!-- index.html -->
<head><!--PLACEHOLDER_META_TAGS_AND_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_META_TAGS_AND_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getMetaTagsAndIconLinks({ appTitle: \"TITLE_OF_YOUR_APP\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html" <!-- Alternative: Force using China CDN -->
"replace": "placeholder='<!--PLACEHOLDER_META_TAGS_AND_ICON_LINKS-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getMetaTagsAndIconLinks({ appTitle: \"TITLE_OF_YOUR_APP\", cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"}
