typed-design-system

Typed - Your Second Brain

████████╗██╗   ██╗██████╗ ███████╗██████╗
╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔════╝██╔══██╗
   ██║    ╚████╔╝ ██████╔╝█████╗  ██║  ██║
   ██║     ╚██╔╝  ██╔═══╝ ██╔══╝  ██║  ██║
   ██║      ██║   ██║     ███████╗██████╔╝
   ╚═╝      ╚═╝   ╚═╝     ╚══════╝╚═════╝

installation

npm i typed-design-system
// or
yarn add typed-design-system

hot-to-use

// using color props
<TypedIcon icon="backlink_opened_xsmall" color="blue" />

// you can adjust icon size by using font size. because svgr's icon option enabled
<TypedIcon icon="add_small" style={{fontSize: "136px"}} />

// you can use classnames for more specific styling (ex - hover, focus, etc)
<TypedIcon icon="docs_medium" color="red" className="docs_medium" />

if you want add svg at once

1. yarn bp
2. push to master branch

if you want add svg step by step

1. add svg in src/TypedIcon/svg
2. generate svg index.ts by node svgGenerate
   • svgGenerate is written in old javascript. so, does not require a transfile
3. deploy storybook by yarn deploy-storybook
   • if you just want to check storybook in lock, yarn storybook
4. rollup bundling by yarn build
   • it create cjs, esm and type definition files
5. publish to npm by yarn publish
6. push to master branch

use with local typed-web-front

1. yarn link in typed-design-system
2. yarn link "typed-design-system" in typed-web-front
3. yarn build in typed-design-system ** if you change typed-design-system you have to re-build

unlink

1. yarn unlink in typed-design-system
2. yarn unlink "typed-design-system" in typed-web-front

for designers

storybook homepage(github-page)

etc

• About SVGR options