Skip to content

Latest commit

 

History

History

design-system-icons

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.storybook
.storybook
 
 
src
src
 
 
webpack
webpack
 
 
.babelrc.json
.babelrc.json
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
builder.mjs
builder.mjs
 
 
jest.config.js
jest.config.js
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Lunit Design System Icons

npm (scoped)

User Guide

https://design-system-icons.d.lunit.io/

Developer Guide

Figma

Lunit Design System Figma: https://www.figma.com/file/l2f0f9phsDwoz4sRr9kYXx/Lunit_Foundation?node-id=12135%3A6326&t=UkUMrZ7Wwkj92Wy6-1

You can multi-select icons to export with Select Layers plugin.

You need SVG Export plugin to export SVGs with proper settings.

  • <svg> tag must not have any dimensions(width, height) to support fontSize props.
  • Any elements inside <svg> (like <path>) must not have own fill to support color props.

Build & Publish

At repository root, the nx build @lunit/design-system-icons command generates components and stores them in generated/**/index.tsx files. These files are then used as entry points by Webpack.

You can publish the package with cd packages/design-system-icons && npm publish --access public.

Roadmap

  • Export SvgIcon wrapped components
  • Publish Storybook docs
  • Add all the design system icons
  • Support basic variants(outlined, filled)
  • Support two-tone variant
  • Export SVGs directly
  • Automated visual test with the Figma project

Support

SangYeob Yu(syyu@lunit.io)