@manuscripts/assets

Manuscripts graphical assets

This repository contains graphical asset originals (Symbols.sketch), as well as exports in various formats bitmap and vector formats.

Publishing

1. npm run build to export the images from the Sketch file, generate the placeholder JS via webpack, and generate the React components via svgr (or npm run build-react if the images have already been exported).
2. Increment the version in package.json.
3. npm publish to publish the package to the private repository.

Resizing the React components

The width and height props are passed through to the SVG component (as are any other props), so set these to resize a component.

Styling the React components

There are no class attributes in the SVG files, but there are other CSS selectors that can be used to apply styles. For example:

const StyledIcon = styled(Icon)`
  /* SVG element selector */
  circle {
    stroke: currentColor;
  }
  
  /* id selector */
  #prefix__svg-addauthor-b {
    fill: #F00;
  }
  
  /* attribute selector */
  [fill='#FFF'] {
    fill: #FDCD47;
  }
`

Conventions

1. Name all items you want to export meaningfully, and use for their naming a pattern like NamePatternLikeThis[@1x|2x].[pdf|svg|png], that is, all words with no separating whitespace or hyphen.
2. Prefer symbols marked exportable over artboards marked exportable (I know this is not actually how most of the resources are exported at the time of writing, but Sketch introduced the Components Panel that makes navigating a lot easier if we use symbols).
3. Export a 1x, 2x PNG + 1x SVG and 1x PDF from all symbols. SVG is used primarily in the web frontend, PDF in the Mac / iOS app and PNG where SVG export for some reason is not great.
4. Do not export a JPEG unless it's for some reason needed.
5. Export only those symbols / artboards that are actually necessary.