@axa-ch/materials

AXA Materials

Materials provides common used icons and images in the SVG format. In addition materials exports styles like colors, helpers, typography and layouts.

Usage

Important: If this component needs to run in Internet Explorer 11, you need to use our polyfill.

npm install @axa-ch/materials

import { svg } from 'lit-html';
import { Arrow_forwardSvg } from '@axa-ch/materials/icons/material-design';

<span>${svg(Arrow_forwardSvg)}</span>;

React

import ArrowForwardSvg from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';

<ArrowForwardSvg />;

React with Typescript

import { ReactComponent as ArrowForwardSvg } from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';

<ArrowForwardSvg />;

You need to use SVGR that takes external SVG files and transforms them into React components with Webpack. It is installed automatically if you use create-pod-app.

If you need to install it manually:

npm install @svgr/webpack --save-dev

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

Styles - Scss Mixins and Variables

Colors

@import '@axa-ch/materials/styles/00-colors.scss';

body {
  background-color: $color-axa-blue;
}

animations

@import '@axa-ch/materials/styles/20-animations.scss';

Breakpoints

@import '@axa-ch/materials/styles/30-layout.scss';

body {
  // Rules for devices bigger than portrail mobile
  @include breakpoint($mediaquery-xs-up) {
    margin: 8px;
  }
}

Typography

@import '@axa-ch/materials/styles/typography.scss';

body {
  font-family: $font-family-primary;
}

Variables

@import '@axa-ch/materials/styles/variables.scss';

body {
  margin: $spacing-1;
}

.box {
  box-shadow: $box-shadow-1;
}

Icon/Image set

Sizes

Please note the size classes of icons and images here. Please just use these dimensions.

SVGs

(Complete list is visible here)

icons
AddSvg
ArrowLeftSvg
ArrowRightSvg
AttachFileSvg
CancelSvg
CaretSvg
CheckCircleSvg
ClearSvg
CloudUploadSvg
CollapseSvg
DateInputSvg
DeleteForeverSvg
DocumentSvg
DownloadSvg
EmailSvg
ExpandSvg
FacebookSvg
InfoSvg
InstagramSvg
KeySvg
LinkedinSvg
MobileSvg
MessageSvg
PersonSvg
PhoneSvg
PowerSvg
SearchSvg
TwitterSvg
UploadSvg
XingSvg
YoutubeSvg

images
AxaLogoSvg
AxaLogoOpenSvg
... and many more in subfolders

Contribution

Process of adding a new image

1. Involve a designer by sending him the new SVG in question, unless the designer already has the file. He will review it and possibly change some things, for example by adjusting inner padding etc. in order to guarantee overall quality.
2. Remove unnecessary code inside the SVG:
   • a. data-name="Layer 2" # layer info for vector drawing software
   • b. <path fill="#fff" d="M0 0h96v96H0z"/> # outer bounding box filled with white background
3. • a. use the internal svgo -invoking script npm run build-images from the materials-folder itself to clean up and optimize the SVGs, then copy the optimized files back from the .tmp folder to images-raw
   • b. alternatively use the online SVG optimizer for the same purpose
4. Manually review the SVGs produced in the last step: add or edit <path> attributes, setting fill="currentColor" and/or strokes="currentColor" as appropriate. Remove unnecessary attributes.
5. Run npm run build to generate a js file for each svg file found. The generated files can be found in the images folder.

Updating materials (UNIX only)

All our icons in the "icons" section are the material icons from google (and nothing else). To update the material icons from google (https://github.com/google/material-design-icons/releases), follow these steps.

1. Remove the contents of the icons-raw folder.
2. Download the newest version of material icons as a ZIP file to your download folder.
3. Extract the material icons zip file into the downloads folder.
4. Rename the extracted folder to material-design-icons.
5. Open a terminal and cd into the materials root folder (src/components/00-materials/).
6. Run sh material-importer.sh.
7. Run a search on only the folder src/components/00-materials/icons-raw and search for <path (whitespace at the end).
8. Replace all occurences with <path fill="currentColor" (whitespace at the end).
9. Run a search on only the folder src/components/00-materials/icons-raw and search for <circle (whitespace at the end).
10. Replace all occurences with <circle fill="currentColor" (whitespace at the end).

Done. This seems to be the fastest and most efficient approach with the current importer script.