Font Icons
Useful for small, frequently used icons that are a single color which is changeable via CSS.
- Place
filename.svg
insource/_patterns/01-atoms/icon/svg/
- Start up active server with
npm start
or compile vianpm run compile:pl|drupal
- View new font icon demo page in Pattern Lab at Atoms > Icon > Icons
- Use either way:
- HTML class:
icon--filename
- Sass Mixin:
@include icon(filename)
- HTML class:
IMPORTANT: Font icons are only compiled at the start of a webpack build. The webpack dev server will have to be restarted to see new icons appear in the font.
Inline SVG
Useful for larger, less frequently used vector images that potentially could be multi-color or able to animate.
- Place
file.svg
within a namespaced folder, likesource/_patterns/01-atoms/icon/svg/
. - Use the special
_svg.twig
pattern to inline it completely. For instance, using the path in step 1, include it like so:twig {% include '@atoms/image/_svg.twig' with { svgpath: '@atoms/icon/svg/file.svg', } %}
- OR just use the
source
function provided by Twig:{{ source('@atoms/icon/svg/file.svg') }}
Static images
If your component uses a static image and you need it to be available for the final bundled output, you must import it in the dependency chain. In your component's index.js
, remember to @import 'path/to/static-image.png';
! A component should import every asset that it uses. This ensures that webpack bundles all necessary production assets into the correct location in the dist folder, and correctly lines up the filepaths.
This is also how demo patterns consumed by Pattern Lab get any local static images. Importing images in a-component/demo/index.js
will ensure that they are available for Pattern Lab's demo without junking up the overall production bundle. See source/_patterns/01-atoms/image/demo/index.js
for an example.