hc-mktg-assets

See gist: 2020-01-16 - Proposal for shared image assets.md

Testing out a basic idea to try to centralize asset management on the marketing side of things.

Running locally

git clone https://github.com/hashicorp/mktg-assets.git
cd mktg-assets
npm i

To build SVGRs for publish: run npm run build. You can edit settings for the build-for-publish process, such as whether to transpile SVGR components, in /scripts/build-for-publish.js.

To build PNGs too, and run the browse-em site locally: run npm run site:bootstrap and then npm start. The former command will take a while since it renders a bunch of PNGs. You can edit settings for the build-for-site process in /scripts/build-for-site.js.

Where can I find the icons

Site where you can browse SVGs is up at https://mktg-assets.netlify.com/.

Analogous design source of truth is in Figma, in the 02 - Global Assets file under the _Design System project.

IE11 width / height: auto Fix

🚨 To use this fix, you must import @hashicorp/mktg-assets/css/g-svg-autofix-canvas.css into your project.

Note: You might not need this fix! If your asset is the same size across all @media, you can pass width or height directly to the component, and it will auto-scale the other dimension.

If you need to run @media queries to change the size of the asset responsively, and you need it to work on IE11, then you probably need this fix.

IE11 doesn't scale auto values correctly. To address this, an __autofix.jsx version of each SVG asset has been created. You can import this asset like @hashicorp/mktg-assets/{category}/{asset-name}/{variant}__autofix.jsx. For example:

import SvgrAdobe from "@hashicorp/mktg-assets/companies/adobe/black__autofix.jsx";