VCC UI is deprecated and has been replaced by Design System

FavIcons

Questions? Ask in Slack #vcc-ui

@volvo-cars/favicons

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.

Installation

$ yarn add @volvo-cars/favicons

Usage

import { renderFavIcons } from '@volvo-cars/favicons';
import { FavIcons } from '@volvo-cars/favicons/react';

renderFavIcons();
//or for React
<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.

Next.js Example

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;

Custom http server Example

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 />

`renderFavIcons`

renderFavIcons();

returns a string of link HTML elements.

`getFavIcons`

getFavIcons();

return an array of objects that has information about the sizes, rel, type and href to the favicon in the shared assets CDN,

Get Icon data without `link` tags

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();
/*
  [{
    "href": "https://www.volvocars.com/static/shared/images/favicons/apple-touch-icon-precomposed-180x180.v2.png",
    "rel": "apple-touch-icon",
    "sizes": "180x180",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.png",
    "rel": "icon",
    "sizes": "16x16",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-32x32.v2.png",
    "rel": "icon",
    "sizes": "32x32",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-192x192.v2.png",
    "rel": "icon",
    "sizes": "192x192",
  },
  {
    "href": "https://www.volvocars.com/static/shared/images/favicons/favicon-16x16.v2.svg",
    "rel": "icon",
    "type": "image/svg+xml",
  }]
*/

FavIcons