This package exports functions and a React component that renders a set of favicons of different sizes associated with the Volvo Cars brand.
The component renders link tags with rel, sizes and href attributes to notify browsers of the type, size and location of the favicon in the shared assets CDN .
$ yarn add @volvo - cars / favicons
import { renderFavIcons } from '@volvo-cars/favicons' ;
import { FavIcons } from '@volvo-cars/favicons/react' ;
renderFavIcons ( ) ;
< FavIcons /> ;
💡 This package includes Typescript definitions
This package is meant to be rendered server-side in the head tag, along with other link elements. By only server-side rendering, none of the code will be included in the client-side bundle.
import Document , { Html , Head , Main , NextScript } from 'next/document' ;
import { FavIcons } from '@volvo-cars/favicons/react' ;
class MyDocument extends Document {
static async getInitialProps ( ctx ) {
const initialProps = await Document . getInitialProps ( ctx ) ;
return { ... initialProps } ;
}
render ( ) {
return (
< Html >
< Head >
< FavIcons />
</ Head >
< body >
< Main />
< NextScript />
</ body >
</ Html >
) ;
}
}
export default MyDocument ;
import express from 'express' ;
import { renderFavIcons } from '@volvo-cars/favicons' ;
const app = express ( ) ;
const favIcons = renderFavIcons ( ) ;
app . get ( '/' , ( req , res ) => {
const html = `
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
${ favIcons }
</head>
<body>
...
</body>
</html> ` ;
res . send ( html ) ;
} ) ;
const port = 3000 ;
app . listen ( port , ( ) => {
console . info ( ` Listening on port ${ port } ` ) ;
} ) ;
The function and React component render the following HTML:
< link rel = apple-touch-icon
href = https://www.volvocars.com/static/shared/images/favicons/apple-touch-icon-precomposed-180x180.v2.png
sizes = 180x180 /> < link rel = icon
href = https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.png
sizes = 16x16 /> < link rel = icon
href = https://www.volvocars.com/static/shared/images/favicons/favicon-32x32.v2.png
sizes = 32x32 /> < link rel = icon
href = https://www.volvocars.com/static/shared/images/favicons/favicon-192x192.v2.png
sizes = 192x192 /> < link rel = icon
href = https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.svg
type = image/svg+xml />
returns a string of link HTML elements.
return an array of objects that has information about the sizes, rel, type and href to the favicon in the shared assets CDN,
It's also possible to get the available favicon sizes and links this package renders through the getFavIcons function exported from @volvo-cars/favicons.
Example
import { getFavIcons } from '@volvo-cars/favicons' ;
getFavIcons ( ) ;
2022 © Volvo Car Corporation Test