# hc-mktg-assets

See gist: [2020-01-16 - Proposal for shared image assets.md](https://gist.github.com/zchsh/dbbefa2a8a1b51174947f970837d6c6e)

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](https://www.figma.com/file/OndhCZy0feitah4UIvQduAVM/02-Global-Assets?node-id=0%3A1) 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](https://gist.github.com/zchsh/b81c25eec538fad1af54baed0a399a8c#pain-point-auto-scaling-inline-svgs-doesnt-work-in-ie11). 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:

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