materials 16.2.1
Install from the command line:
Learn more about npm packages
$ npm install @axa-ch-webhub-cloud/materials@16.2.1
Install via package.json:
"@axa-ch-webhub-cloud/materials": "16.2.1"
About this version
Materials provides common used icons and images in the SVG format. In addition materials exports styles like colors, helpers, typography and layouts.
Important: If this component needs to run in Internet Explorer 11, you need to use our polyfill.
npm install @axa-ch-webhub-cloud/materials
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Arrow_forwardSvg } from '@axa-ch-webhub-cloud/materials/icons/material-design';
<span>${unsafeHTML(Arrow_forwardSvg)}</span>;
import ArrowForwardSvg from '@axa-ch-webhub-cloud/materials/icons-raw/material-design/arrow-forward.svg';
<ArrowForwardSvg />;
import { ReactComponent as ArrowForwardSvg } from '@axa-ch-webhub-cloud/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'],
}
@import '@axa-ch-webhub-cloud/materials/styles/00-colors.scss';
body {
background-color: $color-axa-blue;
}
@import '@axa-ch-webhub-cloud/materials/styles/20-animations.scss';
@import '@axa-ch-webhub-cloud/materials/styles/variables.scss';
body {
// Rules for devices bigger than portrait mobile
@media (min-width: $breakpoint-xs) {
margin: 8px;
}
}
@import '@axa-ch-webhub-cloud/materials/styles/typography.scss';
body {
font-family: $font-family-primary;
}
@import '@axa-ch-webhub-cloud/materials/styles/variables.scss';
body {
margin: $spacing-1;
}
.box {
box-shadow: $box-shadow-1;
}
Please note the size classes of icons
and images
here. Please just use these dimensions.
(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 |
- 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.
- 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
- a.
-
- 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 toimages-raw
- b. alternatively use the online SVG optimizer for the same purpose
- a. use the internal svgo -invoking script
- Manually review the SVGs produced in the last step: add or edit <path> attributes, setting
fill="currentColor"
and/orstrokes="currentColor"
as appropriate. Remove unnecessary attributes. - Run
npm run build
to generate a js file for each svg file found. The generated files can be found in theimages
folder.
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.
- Remove the contents of the
icons-raw
folder. - Download the newest version of material icons as a ZIP file to your download folder.
- Extract the material icons zip file into the downloads folder.
- Rename the extracted folder to
material-design-icons
. - Open a terminal and
cd
into the materials root folder (src/components/00-materials/
). - Run
sh material-importer.sh
. - Run a search on only the folder
src/components/00-materials/icons-raw
and search for<path
(whitespace at the end). - Replace all occurences with
<path fill="currentColor"
(whitespace at the end). - Run a search on only the folder
src/components/00-materials/icons-raw
and search for<circle
(whitespace at the end). - 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.