insomnia/packages/insomnia-components
Gregory Schier 471fa1d7d8
Prevent insomnia-components from bundling entire crypto module (#2291)
* Fix insomnia-components from bundling entire crypto module

* Include package-lock.json
2020-06-12 20:31:37 -07:00
..
.storybook Various k4k8s config gen bugs (#2136) 2020-05-15 08:27:43 +12:00
assets Storybook Sidebar Provisioning & WIP Implementation (#2125) 2020-05-14 14:00:29 -04:00
components Prevent insomnia-components from bundling entire crypto module (#2291) 2020-06-12 20:31:37 -07:00
flow-typed Prevent insomnia-components from bundling entire crypto module (#2291) 2020-06-12 20:31:37 -07:00
.babelrc Initial designer merge 2020-04-26 13:33:39 -07:00
.flowconfig Initial designer merge 2020-04-26 13:33:39 -07:00
.gitignore Remove built files from source control and update bootstrap steps (#2165) 2020-05-15 08:57:03 +12:00
.npmignore Remove built files from source control and update bootstrap steps (#2165) 2020-05-15 08:57:03 +12:00
.svgrrc.json Initial designer merge 2020-04-26 13:33:39 -07:00
index.js Storybook Sidebar Provisioning & WIP Implementation (#2125) 2020-05-14 14:00:29 -04:00
package-lock.json Prevent insomnia-components from bundling entire crypto module (#2291) 2020-06-12 20:31:37 -07:00
package.json Prevent insomnia-components from bundling entire crypto module (#2291) 2020-06-12 20:31:37 -07:00
README.md Initial designer merge 2020-04-26 13:33:39 -07:00
webpack.config.js Initial designer merge 2020-04-26 13:33:39 -07:00

insomnia-components

insomnia-components is a React component library of UI elements needed to build Insomnia. Explore the components via Storybook!

SVGs

We use SVGR on the source SVGs to minify and convert them to React components. This conversion happens during npm run bootstrap.

The generated icons can automatically be bound to the theme library built into Insomnia, by following a few rules. In the source SVG:

  1. All background colors should be black (#000)
  2. All foreground colors should be white (#FFF)

SVGR converts these colors to fill='' and fill='currentColor' respectively. These icons are exposed via svg-icon.js, which sets the css fill and color of the SVG according to the required theme.

You can view the current icons available here.