Iblis UI

Beautiful React UI components to be used in a SaaS

Why

When you use javascript or typescript (with React or React Native for example) it could be difficult to display a SVG file in your app.

Many libraries exists but looks a little too much complicated to use :

• React Inline Svg Load the SVG with an XHR request and then embed it in the document
• React Native Svg Didn't success to easy load my own SVG from a file

Solution

By creating your own font, you can easily use your SVG file by displaying it like normal text.

Demos

• See fonts use  in the Font Test Drive
• Demo source

📌   Install

npm install iblis-font

or

yarn add iblis-font

💻   Usage

Iblis-Font assume you’re using webpack to process CSS and files. This package includes all necessary font files (woff, eot, ttf, svg) and a CSS file with font-face declarations pointing at these files.

You will need to have webpack setup to load css and font files. Many tools built with Webpack will work out of the box with Typefaces such as Gatsby and Create React App.

To use, simply require the package in your project’s entry file e.g.

// Load Iblis Font
require('iblis-font')

You can then display the icon by typing :



Or if you use React:

   <div style={{ fontFamily: 'Iblis' }}>
       {'\ue900'}
   </div>

If you use material-ui:

   <Icon className={classNames('iblis-rocket')} />

If you are using react native for iOS :

In info.plist add for the key: <key>UIAppFonts</key> the value in array <string>Iblis.ttf</string>

Add the Iblis.ttf to your assets folder and lauch react-native link to link the file with your android and iOS project

How to create your own font

First you need to have your icons in SVG format

To create the font I use the online tools: IcoMoon App

You need to import your svg file

Then select all the icon your want for your font and click on generate font

Then in the zip you can find the fonts in the /fonts folder and the style.css

🕺   Contribute

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Send a pull request 🙌

🔨   Todo

• Add more icons

💊   Known issues:

• Nothing for the moment

🙏   Thanks:

• Typefaces for giving me the idea
• IconMoon to allow to create your own font for free

Iblis-Components

How to use

Install it and run storybook:

yarn
yarn storybook

You can now explore all components at http://localhost:6006

How to Export as a Static App

Install it and export:

yarn
yarn build-storybook

How to Dev

If you use Visual Studio Code, I recommand you to install the following plugins:

• https://marketplace.visualstudio.com/items?itemName=eg2.tslint (to be sure that your code respect our guidelines specified in the linter tslint.json)

To see change just edit the compoments in folder ./src/components directly and see change with hot-reload.

If you create a new component , you need add a new stories in the folder ./stories and see the difference with all the properties

How to build

Before push a new version, use:

yarn
yarn build

TODO update type definition for addon with v4 when it wil be updated generate documentation for textfield and selectfield use excludedPropTypes to exclude the InjectedFormProps from documentation

https://medium.freecodecamp.org/effective-use-of-typescript-with-react-3a1389b6072a

https://github.com/piotrwitek/react-redux-typescript-guide

list all the libraries

#talk about theming

exampe how to use in stories

not exhausitive (see example how to use and expand)

#Can be sure as it is or could be a a good starter to create your own components

// require.resolve("react-docgen-typescript-loader")

font ilbis-ofony

put the list of library

🕺   Contribute

1. Fork this repository to your own GitHub account and then clone it to your local device
2. Install dependencies using Yarn: yarn install
3. Make the necessary changes and ensure that the tests are passing using yarn test
4. Send a pull request 🙌