A tool to convert SVG into React 17 / TypeScript components + Ion Icons

Dorival Pedroso — Tue, 16 Feb 2021 07:55:56 +0000

Since this interesting post Making SVG icon libraries for React app, I've been converting SVG files into React components... manually. Now I've created a tool to automate the process, and it may be useful to you too.

Others have been also using SVG-React components, in particular for Icons:

The tool is here: https://github.com/cpmech/svg-to-react, and it is supposed to work for not only Icons.

Some key aspects that I've considered are:

Generate React 17 components; those without "import React..."
Generate TypeScript components that I can copy-n-paste into my projects
Optimize and (try to) fix the path colors.
Wrap the SVG into a CSS flex composition to make it easy to adjust the SVG size.

To accomplish these goals, I use:

svgo to optimize the SVG, a lot.
svgson to fix fill="currentColor" (optionally)

Usage:

✔ What is the "input" directory? · /tmp/svg-to-react/assets
✔ What is the "output" directory? · /tmp/svg-to-react/svgs
✔ What is the prefix for the components? · Svg
✔ What is the base url for XCollection.tsx? · 
✔ Add fill="currentColor" if missing? (Y/n) · true
✔ Delete existent output directory? ️⚠️  (y/N) · true
🚀 Processing SVG files
... processing SvgLogoGithub
... processing SvgLogoWhatsapp
... processing SvgSync
😀 DONE

The resulting code makes it easy to rescale and center the SVG file. The tool also generates an XCollection.tsx component to visualize all generated SVG.

For example, I've used to create React Icons (again ;-): https://github.com/cpmech/iricons

The generated React component looks like this:

export interface SvgSyncProps {
  size?: string; // size of square container
  style?: React.CSSProperties; // not for height or width
}

export const SvgSync: React.FC<SvgSyncProps> = ({ size = '24px', style }) => {
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
        height: size,
        width: size,
      }}
    >
      <div
        style={{
          position: 'relative',
          height: 0,
          width: '100%',
          padding: 0,
          paddingBottom: '100%',
        }}
      >
        <svg
          style={{
            position: 'absolute',
            height: '100%',
            width: '100%',
            left: 0,
            top: 0,
          }}
          viewBox="0 0 512 512"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="..." fill="currentColor"/>
        </svg>
      </div>
    </div>
  );
};

And can be directly imported into a React project.

I hope it helps 😀

Publishing and reusing React components with TypeScript and Emotion

Dorival Pedroso — Tue, 02 Feb 2021 05:04:01 +0000

Introduction

Usually, we should not publish TypeScript code to the NPM database, except for the typings. The normal approach is to convert the code into CommonJS (cjs) and/or ES modules (esm) and then publish. An easy way to do this is with RollupJS.

Nonetheless, it is difficult to convert the components that use Emotion to reusable modules. Moreover, why not making our TypeScript code directly available? (aiming at reusing it later in a React application).

Here, we explain our approach to publish a bunch of simple-but-powerful React 17 components, written in TypeScript and with Emotion, that we use in a number of projects (e.g. https://epop.net.br).

The code is available on GitHub: https://github.com/cpmech/rcomps

Publishing TypeScript components
Reusing TypeScript Components
Emotion and React 17
Conclusion

Publishing TypeScript components

NOTE: This procedure uses yarn, rsync, and jq.

The idea is quite simple. First, copy all the .ts and .tsx files to the dist directory when calling yarn build. To do so, add this command to package.json:

"build": "rm -rf dist && mkdir -p dist/rcomps && rsync -av src/components/* dist/rcomps --exclude __stories__ --exclude __tests__"

Above, we remove any existent dist directory, create a subdirectory named dist/rcomps, which will help the consumer of this library to move it to the right place, and then copy the files using rsync (ignoring storybook and jest files).

Second, for the yarn dist command, copy an alternative package-dist.json file to the dist directory by using this package.json command:

"dist": "yarn build && cp package-dist.json dist/package.json && cd dist/ && yarn publish --access=public || true && cd .."

Above, we call the build command, copy the two package-json files into dist, and then call yarn publish.

The alternative (distributable) package-dist.json is:

{
  "name": "<YOUR NPM PROJECT HERE>",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "fix:ver1": "jq '.version = $newVal' --arg newVal `jq -r '.version' package.json` ../package.json > tmp.$$.json && mv -f tmp.$$.json ../package.json",
    "fix:ver2": "jq '.version = $newVal' --arg newVal `jq -r '.version' package.json` ../package-dist.json > tmp.$$.json && mv -f tmp.$$.json ../package-dist.json",
    "git:add": "git add ../package.json ../package-dist.json",
    "git:tag": "git tag v`jq -r '.version' package.json`",
    "git:all": "yarn git:add && git commit -m 'Publish' && yarn git:tag && git push && git push --tags",
    "postpublish": "yarn fix:ver1 && yarn fix:ver2 && yarn git:all"
  },
  "repository": "<YOUR GITHUB REPO HERE>",
  "description": "TypeScript React Components with Emotion"
}

The above code will automatically tag the git repository and fix the version numbers in both the main package.json and the publishable (alternative) package-dist.json. Each sub-command is explained below:

fix:ver1 fixes the version in the parent package.json file
fix:ver2 fixes the version in the distributable package-dist.json file
git:add takes the modifications in package.json and package-dist.json
git:tag creates a new tag based on the updated version in package.json
git:all runs "all" git commands, including adding, tagging, committing, pushing, and pushing tags
postpublish is the hook, called automatically by yarn publish, that will call the above sub-commands.

Reusing TypeScript Components

To reuse the TypeScript components, we have to copy the .ts and .tsx files from node_modules to the right place (e.g. the src directory of your create-react-app project). To do so, we add the following command to the scripts section of the app's package.json:

"postinstall": "bash ./scripts/npm_postinstall.bash"

The above command will be automatically called whenever we run yarn install.

The auxiliary npm_postinstall.bash script is:

#!/bin/bash
set -e
if [[ -d "./node_modules/@cpmech/rcomps/rcomps" ]]; then
    echo ">>> moving rcomps to src <<<"
    rm -rf ./src/rcomps
    mv ./node_modules/@cpmech/rcomps/rcomps ./src/
fi

The above script simply removes any existent ./src/rcomps directory from your React app and copy it again from the node_modules. NOTE: we have to move the rcomps directory from node_modules because react-scripts start or react-scripts test may complain if they find TypeScript files inside node_modules.

Now, you can simply (for example):

yarn add @cpmech/rcomps

EmotionJS and React 17

Emotion is fantastic! It allows you to write real CSS to style your component. So, everything is possible! For example, this is a piece of CSS for our HTML input element see our inputElementCss.ts file:

  const common = `
    position: relative;
    height: ${height}px;
    margin-top: ${marginTop}px;
    width: ${width};
    input {
      font-size: ${fontSize}px;
      box-sizing: border-box;
      height: ${height}px;
      width: 100%;
      padding-left: ${paddingHoriz}px;
      padding-right: ${pickerMode ? paddingRightPicker : paddingHoriz}px;
      border: ${borderWidth}px solid ${borderColor};
      border-radius: ${borderRadius}px;
      ${flatLeft ? `border-top-left-radius:0;border-bottom-left-radius:0;` : ''}
      ${flatRight ? `border-top-right-radius:0;border-bottom-right-radius:0;` : ''}
      color: ${textMode ? mutedColor : color};
      background-color: ${bgColor};
      resize: none;
      outline: none;
      ${pickerMode && !textMode ? `cursor:pointer;` : ''}
      ${
        pickerMode
          ? `text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;`
          : ''
      }
    }
    input[required] + label[placeholder] {
      display: block;
      pointer-events: none;
      line-height: ${labelFontSize}px;
      margin-top: -${deltaLabel}px;
    }
  `;

Note above the use of input[required] + label[placeholder] that we cannot do with standard React.

To use EmotionJS with React 17, where we don't need to import React anymore, simply add the following line to the top of your TypeScript code:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

And then use like this:

export const RcProgress: React.FC<RcProgressProps> = ({
  progress,
  color = '#ffffff',
  backgroundColor = '#e5e5e5',
  borderColor,
  barColor = '#4d50c6',
  borderRadius = 300,
}) => {
  const p = progress || 0;
  const width = p < 0 ? 0 : p > 100 ? 100 : p;
  return (
    <div
      css={css`
        ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
        ${borderColor ? `border: 1px solid ${borderColor};` : ''}
        border-radius: ${borderRadius}px;
      `}
    >
      <div
        css={css`
          height: 24px;
          width: ${width}%;
          color: ${color};
          font-weight: bold;
          font-size: 15px;
          line-height: 1.5;
          background-color: ${barColor};
          border-radius: ${borderRadius}px;
          text-align: center;
          padding-top: 1px;
        `}
      >
        {width > 3 && `${width}%`}
      </div>
    </div>
  );
};

Conclusion

The development process with TypeScript and React 17 is quite enjoyable these days. The create-react-app makes the bootstrapping process much easier (e.g. yarn create react-app myapp --template typescript). We also suggest using EmotionJS for styling the React components because we can do much more than with standard React. Finally, it is possible and convenient to make your TypeScript Components directly available on NPM.

PS: check out our components :-)

DEV Community: Dorival Pedroso