@imtf/icons 0.0.1 → 0.0.3

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@imtf/icons",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Library of icons (React components, font and svg)",
+  "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "repository": "ssh://git@gitlab.imtf-devops.com:2222/web/icons.git",
   "homepage": "https://gitlab.imtf-devops.com/web/icons",
@@ -14,8 +15,8 @@
     "lib"
   ],
   "scripts": {
-    "start": "cd website && yarn && yarn start",
-    "optimize": "rimraf ./src/optimized & svgo -q -p 8 -f ./src/icons -o ./src/optimized",
+    "start": "cd ../website && yarn && yarn start",
+    "optimize": "rimraf ./src/optimized & svgo -q -p 8 -f ./src/svg -o ./src/optimized",
     "build": "yarn optimize && ts-node scripts/index.ts && rollup -c",
     "watch": "rollup -cw"
   },
@@ -28,8 +29,8 @@
     "@babel/preset-react": "^7.16.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@svgr/cli": "^5.5.0",
-    "@svgr/core": "^5.5.0",
+    "@svgr/cli": "^6.1.1",
+    "@svgr/core": "^6.1.1",
     "@types/react": "^17.0.35",
     "camelcase": "^6.2.0",
     "rimraf": "^3.0.2",
@@ -41,6 +42,7 @@
   },
   "dependencies": {
     "@types/lodash.get": "^4.4.6",
+    "cross-env": "^7.0.3",
     "lodash.get": "^4.4.2"
   }
 }

package/README.md

@@ -1,75 +0,0 @@
-## Installation
-
-`yarn add @imtf/icons`
-
-## Usage
-
-```
-import { IconProvider, AdminIcon, AppIcon } from "@imtf/icons";
-
-const palette = {
-    primary: {
-        main: '#3670ad'
-    },
-    secondary: {
-        main: '#6b1c2e'
-    }
-}
-
-<IconProvider palette={palette} defaultColor="primary.main" defaultSize={32}>
-    <AdminIcon />
-    <AppIcon color="secondary.main />
-</IconProvider>
-```
-
-## IconProvider props
-
-| Props        | Type          | Default      | Notes                                                              |
-| ------------ | ------------- | ------------ | ------------------------------------------------------------------ |
-| palette      | object        | {}           | A color palette that can be accessed by all icons                  |
-| defaultColor | string        | currentColor | Can be a path of the palette, an hexadecimal value or a color name |
-| defaultSize  | number/string | 24           | Defines the default width and height of the icons                  |
-
-## Icon props
-
-All default [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) can be used as well as some custom ones :
-
-| Props | Type          | Default      | Notes                                                              |
-| ----- | ------------- | ------------ | ------------------------------------------------------------------ |
-| size  | number/string | null         | the default width and height of the icon                           |
-| color | string        | currentColor | Can be a path of the palette, an hexadecimal value or a color name |
-
-## Raw SVG icons
-
-If necessary, you can directly import the SVG file of each icons.
-
-> They do not consume the default values from the `IconProvider`
-
-### Usage
-
-```
-import { Calendar } from "@imtf/icons/svg";
-
-<img src={Calendar} alt="calendar" style={{ width: 50 }} />
-```
-
-### Custom component
-
-In case you need to create your own React component out of an SVG, you will need to import the SVG from his absolute path.
-
-```
-import React from "react";
-import { ReactComponent as Calendar } from "@imtf/icons/svg/Calendar.svg";
-
-const CalendarIcon = (props) => {
-  return <Calendar {...props} />;
-};
-
-export default TestIcon;
-```
-
-## Configuration
-
-### Add new icons
-
-To add new svg icons, you must add them in the `src/icons` folder and run `npm run build` or `yarn build` on your terminal. Don't worry about redundant or useless information on your SVG files, they will be optimized thanks to [svgo](https://github.com/svg/svgo).