├── .circleci
└── config.yml
├── .eslintrc.json
├── .gitignore
├── .huskyrc
├── .lintstagedrc
├── .npmignore
├── .nvmrc
├── .travis.yml
├── LICENSE
├── README.md
├── demo
├── App
│ ├── App.test.tsx
│ ├── App.tsx
│ └── index.ts
├── Icon
│ ├── Icon.test.tsx
│ ├── Icon.tsx
│ └── index.ts
└── assets
│ └── icons
│ └── selection.json
├── images
└── hero.png
├── jest.config.ts
├── package.json
├── public
├── index.html
└── index.tsx
├── src
├── IcomoonReact
│ ├── IcomoonReact.test.tsx
│ ├── IcomoonReact.tsx
│ └── index.ts
└── index.ts
└── tsconfig.json
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | jobs:
3 | test_and_build:
4 | docker:
5 | - image: circleci/node:12.13.1
6 | working_directory: ~/repo
7 | steps:
8 | - checkout
9 | # Download and cache dependencies
10 | - restore_cache:
11 | keys:
12 | - v1-dependencies-{{ checksum "package.json" }}
13 | # fallback to using the latest cache if no exact match is found
14 | - v1-dependencies-
15 | - run: yarn install
16 | - save_cache:
17 | paths:
18 | - node_modules
19 | key: v1-dependencies-{{ checksum "package.json" }}
20 | # run tests!
21 | - run: yarn test
22 | - run: yarn tsc
23 | - persist_to_workspace:
24 | root: ~/repo
25 | paths: .
26 | coveralls_publish:
27 | docker:
28 | - image: circleci/node:12.13.1
29 | working_directory: ~/repo
30 | steps:
31 | - attach_workspace:
32 | at: ~/repo
33 | - run: npm run coveralls
34 | npm_publish:
35 | docker:
36 | - image: circleci/node:12.13.1
37 | working_directory: ~/repo
38 | steps:
39 | - attach_workspace:
40 | at: ~/repo
41 | - run:
42 | name: Authenticate with registry
43 | command: echo "//registry.npmjs.org/:_authToken=$npm_TOKEN" > ~/repo/.npmrc
44 | - run:
45 | name: Publish package
46 | command: npm publish
47 | workflows:
48 | version: 2
49 | icomoon_flow:
50 | jobs:
51 | - test_and_build:
52 | filters:
53 | tags:
54 | only: /^v.*/
55 | branches:
56 | ignore: /.*/
57 | - coveralls_publish:
58 | requires:
59 | - test_and_build
60 | filters:
61 | tags:
62 | only: /^v.*/
63 | branches:
64 | ignore: /.*/
65 | - npm_publish:
66 | requires:
67 | - test_and_build
68 | filters:
69 | tags:
70 | only: /^v.*/
71 | branches:
72 | ignore: /.*/
73 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": "airbnb",
4 | "env": {
5 | "es6": true,
6 | "node": true,
7 | "browser": true,
8 | "jest": true
9 | },
10 | "rules": {
11 | "no-unused-vars": "error",
12 | "prefer-const": "error",
13 | "no-undef": "error",
14 | "no-var": "error",
15 | "object-shorthand": "error",
16 | "quote-props": ["error", "as-needed"],
17 | "prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],
18 | "prefer-destructuring": [
19 | "error",
20 | {
21 | "array": true,
22 | "object": true
23 | },
24 | {
25 | "enforceForRenamedProperties": false
26 | }
27 | ],
28 | "quotes": ["error", "single"],
29 | "arrow-spacing": ["error", { "before": true, "after": true }],
30 | "arrow-parens": ["error", "as-needed"],
31 | "no-dupe-class-members": "error",
32 | "no-duplicate-imports": "error",
33 | "no-nested-ternary": "error",
34 | "no-unneeded-ternary": "error",
35 | "no-mixed-operators": "error",
36 | "nonblock-statement-body-position": ["error", "below"],
37 | "brace-style": "error",
38 | "no-else-return": "error",
39 | "indent": ["error", 2],
40 | "space-before-blocks": "error",
41 | "keyword-spacing": ["error", { "before": true }],
42 | "space-infix-ops": "error",
43 | "eol-last": ["error", "always"],
44 | "no-whitespace-before-property": "error",
45 | "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
46 | "padded-blocks": ["error", "never"],
47 | "space-in-parens": ["error", "never"],
48 | "array-bracket-spacing": ["error", "never"],
49 | "object-curly-spacing": ["error", "always"],
50 | "block-spacing": "error",
51 | "comma-spacing": ["error"],
52 | "computed-property-spacing": ["error", "never"],
53 | "func-call-spacing": ["error"],
54 | "key-spacing": ["error"],
55 | "no-trailing-spaces": "error",
56 | "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
57 | "comma-style": ["error", "last"],
58 | "comma-dangle": [
59 | "error",
60 | {
61 | "arrays": "always-multiline",
62 | "objects": "always-multiline",
63 | "imports": "always-multiline",
64 | "exports": "always-multiline",
65 | "functions": "ignore"
66 | }
67 | ],
68 | "semi": ["error", "always"],
69 | "radix": "error",
70 | "no-new-wrappers": "error",
71 | "camelcase": "error"
72 | },
73 | "plugins": ["babel", "react"],
74 | "parserOptions": {
75 | "sourceType": "module"
76 | },
77 | "settings": {
78 | "react": {
79 | "version": "detect"
80 | }
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .parcel-cache
2 | .vscode
3 | .idea
4 | .DS_Store
5 | yarn-error.log
6 | yarn.lock
7 | /node_modules
8 | /dist
9 | /build
10 | /coverage
--------------------------------------------------------------------------------
/.huskyrc:
--------------------------------------------------------------------------------
1 | {
2 | "hooks": {
3 | "pre-commit": "lint-staged"
4 | }
5 | }
--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 | "*.{js,jsx,ts,tsx}": ["prettier-eslint --write", "git add"]
3 | }
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | public
2 | images
3 | .babelrc
4 | .gitignore
5 | .nvmrc
6 | .eslintrc
7 | .idea
8 | .eslintrc.json
9 | coverage
10 | .vscode
11 | .huskyrc
12 | .lintstagedrc
13 | .travis.yml
14 | .travis.yml
15 | tsconfig.json
16 | demo
17 | jest.config.js
18 | webpack.config.js
19 | index.tsx
20 | yarn.lock
21 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v12.13.1
2 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - 12.13.1
5 |
6 | cache: yarn
7 |
8 | install:
9 | - yarn install
10 | - yarn tsc
11 |
12 | script:
13 | - COVERALLS_REPO_TOKEN=$coveralls_repo_token npm run coveralls
14 |
15 | deploy:
16 | provider: npm
17 | email: ponciusz@gmail.com
18 | api_key: $NPM_TOKEN
19 | on:
20 | tags: true
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Kamil Albrycht
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/ponciusz/icomoon-react) [](https://coveralls.io/github/ponciusz/icomoon-react?branch=master)
2 |
3 | # icomoon-react
4 |
5 | 
6 |
7 | React Component which let you use icomoon `selection.json` file to render SVG instead font
8 |
9 | Short example can be found [here](https://codesandbox.io/s/q89onw1kqq)
10 |
11 | installation with YARN:
12 |
13 | ```
14 | yarn add icomoon-react
15 | ```
16 |
17 | installation with NPM:
18 |
19 | ```
20 | npm install icomoon-react
21 | ```
22 |
23 | ## Quick usage:
24 |
25 | use `selection.json` generated from http://icomoon.io/app
26 |
27 | - add your desired icons, select from ready library or add custom svg's
28 | - once done click Generate Font
29 | - click Download
30 | - unzip package and grab your `selection.json`
31 |
32 | ```js
33 | import iconSet from "somewhere/selection.json";
34 | import IcomoonReact, { iconList } from "icomoon-react";
35 | ```
36 |
37 | than just use component in code:
38 |
39 | ```js
40 |
41 | ```
42 |
43 | To console.log all icons use: `iconList(iconSet)` function
44 |
45 | ## Advanced usage:
46 |
47 | To not include set all over again just create your wraper component:
48 |
49 | #### Icon.tsx
50 |
51 | ```js
52 | import React from "react";
53 |
54 | import IcomoonReact from "../IcomoonReact";
55 | import iconSet from "./pathToSelection/selection.json";
56 |
57 | const Icon: React.FC<{
58 | color?: string,
59 | size: string | number,
60 | icon: string,
61 | className?: string
62 | }> = props => {
63 | const { color, size = "100%", icon, className = "" } = props;
64 | return (
65 |
72 | );
73 | };
74 |
75 | export default Icon;
76 | ```
77 |
78 | ### App.tsx
79 |
80 | ```js
81 | import React from "react";
82 | import Icon from "./Icon";
83 |
84 | const App = () => (
85 |
86 |
87 |
88 | );
89 |
90 | export default App;
91 | ```
92 |
93 | # Develop
94 |
95 | clone repo `git clone git@github.com:ponciusz/icomoon-react.git`
96 |
97 | `yarn install`
98 |
99 | `yarn start`
100 |
--------------------------------------------------------------------------------
/demo/App/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./index";
4 |
5 | it("renders without crashing", () => {
6 | const div = document.createElement("div");
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/demo/App/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { iconList } from "../../src/IcomoonReact";
3 | import Icon from "../Icon";
4 | import iconSet from "../assets/icons/selection.json";
5 |
6 | const styles: React.CSSProperties = {
7 | borderCollapse: "collapse",
8 | border: "1px solid black",
9 | padding: "10px"
10 | };
11 |
12 | const App = () => (
13 |
14 |
15 |
16 |
17 | |
18 | Icon List
19 | |
20 |
21 |
22 |
23 | {iconList(iconSet).map(icon => (
24 |
25 | |
26 |
27 | |
28 | {icon} |
29 |
30 | ))}
31 |
32 |
33 |