Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/jaywcjlove/icongo

Search SVG Icons. Easily include popular icons in your React projects and provide an easy tool to convert SVG into React components. @icongo
https://github.com/jaywcjlove/icongo
icons react react-components reactjs search svg svg-files svg-icon svg-icons
Last synced: about 1 month ago
JSON representation
Search SVG Icons. Easily include popular icons in your React projects and provide an easy tool to convert SVG into React components. @icongo
Host: GitHub
URL: https://github.com/jaywcjlove/icongo
Owner: jaywcjlove
License: mit
Created: 2022-08-10T16:32:48.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-05-05T05:50:20.000Z (4 months ago)
Last Synced: 2024-05-28T13:41:55.147Z (4 months ago)
Topics: icons, react, react-components, reactjs, search, svg, svg-files, svg-icon, svg-icons
Language: TypeScript
Homepage: https://icongo.github.io
Size: 296 MB
Stars: 107
Watchers: 3
Forks: 10
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

StarryDivineSky - jaywcjlove/icongo
README

        IconGo

===

[![npm version](https://img.shields.io/npm/v/icongo.svg)](https://www.npmjs.com/package/icongo)

[![Github](https://img.shields.io/github/stars/jaywcjlove/icongo?logo=github)](https://github.com/jaywcjlove/icongo)

[![CI](https://github.com/jaywcjlove/icongo/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/icongo/actions/workflows/ci.yml)

[![Docker Image Version (latest by date)](https://img.shields.io/docker/v/wcjiang/icongo?logo=docker)](https://hub.docker.com/r/wcjiang/icongo)

[![Docker Image Size (latest by date)](https://img.shields.io/docker/image-size/wcjiang/icongo?logo=docker)](https://hub.docker.com/r/wcjiang/icongo)

Easily include popular icons in your React projects and provide an easy tool to convert `svg` into React components.

![IconGo: Search Icons](https://user-images.githubusercontent.com/1680273/186862271-43f13434-47fc-4c60-a844-4a36e19be4d2.png)

**All Packages**

| Name | NPM Version | Website |

| ----- | ----- | ----- |

| `@icongo/ad` | [![npm version](https://img.shields.io/npm/v/@icongo/ad.svg)](https://www.npmjs.com/package/@icongo/ad) | [`#preview`](https://icongo.github.io/#/icons/ad/) |

| `@icongo/ae` | [![npm version](https://img.shields.io/npm/v/@icongo/ae.svg)](https://www.npmjs.com/package/@icongo/ae) | [`#preview`](https://icongo.github.io/#/icons/ae/) |

| `@icongo/bi` | [![npm version](https://img.shields.io/npm/v/@icongo/bi.svg)](https://www.npmjs.com/package/@icongo/bi) | [`#preview`](https://icongo.github.io/#/icons/bi/) |

| `@icongo/bl` | [![npm version](https://img.shields.io/npm/v/@icongo/bl.svg)](https://www.npmjs.com/package/@icongo/bl) | [`#preview`](https://icongo.github.io/#/icons/bl/) |

| `@icongo/br` | [![npm version](https://img.shields.io/npm/v/@icongo/br.svg)](https://www.npmjs.com/package/@icongo/br) | [`#preview`](https://icongo.github.io/#/icons/br/) |

| `@icongo/bs` | [![npm version](https://img.shields.io/npm/v/@icongo/bs.svg)](https://www.npmjs.com/package/@icongo/bs) | [`#preview`](https://icongo.github.io/#/icons/bs/) |

| `@icongo/bts` | [![npm version](https://img.shields.io/npm/v/@icongo/bts.svg)](https://www.npmjs.com/package/@icongo/bts) | [`#preview`](https://icongo.github.io/#/icons/bts/) |

| `@icongo/cb` | [![npm version](https://img.shields.io/npm/v/@icongo/cb.svg)](https://www.npmjs.com/package/@icongo/cb) | [`#preview`](https://icongo.github.io/#/icons/cb/) |

| `@icongo/cci` | [![npm version](https://img.shields.io/npm/v/@icongo/cci.svg)](https://www.npmjs.com/package/@icongo/cci) | [`#preview`](https://icongo.github.io/#/icons/cci/) |

| `@icongo/ccp` | [![npm version](https://img.shields.io/npm/v/@icongo/ccp.svg)](https://www.npmjs.com/package/@icongo/ccp) | [`#preview`](https://icongo.github.io/#/icons/ccp/) |

| `@icongo/cg` | [![npm version](https://img.shields.io/npm/v/@icongo/cg.svg)](https://www.npmjs.com/package/@icongo/cg) | [`#preview`](https://icongo.github.io/#/icons/cg/) |

| `@icongo/ci` | [![npm version](https://img.shields.io/npm/v/@icongo/ci.svg)](https://www.npmjs.com/package/@icongo/ci) | [`#preview`](https://icongo.github.io/#/icons/ci/) |

| `@icongo/co` | [![npm version](https://img.shields.io/npm/v/@icongo/co.svg)](https://www.npmjs.com/package/@icongo/co) | [`#preview`](https://icongo.github.io/#/icons/co/) |

| `@icongo/ct` | [![npm version](https://img.shields.io/npm/v/@icongo/ct.svg)](https://www.npmjs.com/package/@icongo/ct) | [`#preview`](https://icongo.github.io/#/icons/ct/) |

| `@icongo/cy` | [![npm version](https://img.shields.io/npm/v/@icongo/cy.svg)](https://www.npmjs.com/package/@icongo/cy) | [`#preview`](https://icongo.github.io/#/icons/cy/) |

| `@icongo/di` | [![npm version](https://img.shields.io/npm/v/@icongo/di.svg)](https://www.npmjs.com/package/@icongo/di) | [`#preview`](https://icongo.github.io/#/icons/di/) |

| `@icongo/ei` | [![npm version](https://img.shields.io/npm/v/@icongo/ei.svg)](https://www.npmjs.com/package/@icongo/ei) | [`#preview`](https://icongo.github.io/#/icons/ei/) |

| `@icongo/ev` | [![npm version](https://img.shields.io/npm/v/@icongo/ev.svg)](https://www.npmjs.com/package/@icongo/ev) | [`#preview`](https://icongo.github.io/#/icons/ev/) |

| `@icongo/fa` | [![npm version](https://img.shields.io/npm/v/@icongo/fa.svg)](https://www.npmjs.com/package/@icongo/fa) | [`#preview`](https://icongo.github.io/#/icons/fa/) |

| `@icongo/fc` | [![npm version](https://img.shields.io/npm/v/@icongo/fc.svg)](https://www.npmjs.com/package/@icongo/fc) | [`#preview`](https://icongo.github.io/#/icons/fc/) |

| `@icongo/fd` | [![npm version](https://img.shields.io/npm/v/@icongo/fd.svg)](https://www.npmjs.com/package/@icongo/fd) | [`#preview`](https://icongo.github.io/#/icons/fd/) |

| `@icongo/fg` | [![npm version](https://img.shields.io/npm/v/@icongo/fg.svg)](https://www.npmjs.com/package/@icongo/fg) | [`#preview`](https://icongo.github.io/#/icons/fg/) |

| `@icongo/fi` | [![npm version](https://img.shields.io/npm/v/@icongo/fi.svg)](https://www.npmjs.com/package/@icongo/fi) | [`#preview`](https://icongo.github.io/#/icons/fi/) |

| `@icongo/fl` | [![npm version](https://img.shields.io/npm/v/@icongo/fl.svg)](https://www.npmjs.com/package/@icongo/fl) | [`#preview`](https://icongo.github.io/#/icons/fl/) |

| `@icongo/fp` | [![npm version](https://img.shields.io/npm/v/@icongo/fp.svg)](https://www.npmjs.com/package/@icongo/fp) | [`#preview`](https://icongo.github.io/#/icons/fp/) |

| `@icongo/fs` | [![npm version](https://img.shields.io/npm/v/@icongo/fs.svg)](https://www.npmjs.com/package/@icongo/fs) | [`#preview`](https://icongo.github.io/#/icons/fs/) |

| `@icongo/gi` | [![npm version](https://img.shields.io/npm/v/@icongo/gi.svg)](https://www.npmjs.com/package/@icongo/gi) | [`#preview`](https://icongo.github.io/#/icons/gi/) |

| `@icongo/go` | [![npm version](https://img.shields.io/npm/v/@icongo/go.svg)](https://www.npmjs.com/package/@icongo/go) | [`#preview`](https://icongo.github.io/#/icons/go/) |

| `@icongo/gr` | [![npm version](https://img.shields.io/npm/v/@icongo/gr.svg)](https://www.npmjs.com/package/@icongo/gr) | [`#preview`](https://icongo.github.io/#/icons/gr/) |

| `@icongo/gy` | [![npm version](https://img.shields.io/npm/v/@icongo/gy.svg)](https://www.npmjs.com/package/@icongo/gy) | [`#preview`](https://icongo.github.io/#/icons/gy/) |

| `@icongo/hi` | [![npm version](https://img.shields.io/npm/v/@icongo/hi.svg)](https://www.npmjs.com/package/@icongo/hi) | [`#preview`](https://icongo.github.io/#/icons/hi/) |

| `@icongo/ic` | [![npm version](https://img.shields.io/npm/v/@icongo/ic.svg)](https://www.npmjs.com/package/@icongo/ic) | [`#preview`](https://icongo.github.io/#/icons/ic/) |

| `@icongo/ii` | [![npm version](https://img.shields.io/npm/v/@icongo/ii.svg)](https://www.npmjs.com/package/@icongo/ii) | [`#preview`](https://icongo.github.io/#/icons/ii/) |

| `@icongo/ik` | [![npm version](https://img.shields.io/npm/v/@icongo/ik.svg)](https://www.npmjs.com/package/@icongo/ik) | [`#preview`](https://icongo.github.io/#/icons/ik/) |

| `@icongo/im` | [![npm version](https://img.shields.io/npm/v/@icongo/im.svg)](https://www.npmjs.com/package/@icongo/im) | [`#preview`](https://icongo.github.io/#/icons/im/) |

| `@icongo/io` | [![npm version](https://img.shields.io/npm/v/@icongo/io.svg)](https://www.npmjs.com/package/@icongo/io) | [`#preview`](https://icongo.github.io/#/icons/io/) |

| `@icongo/ir` | [![npm version](https://img.shields.io/npm/v/@icongo/ir.svg)](https://www.npmjs.com/package/@icongo/ir) | [`#preview`](https://icongo.github.io/#/icons/ir/) |

| `@icongo/is` | [![npm version](https://img.shields.io/npm/v/@icongo/is.svg)](https://www.npmjs.com/package/@icongo/is) | [`#preview`](https://icongo.github.io/#/icons/is/) |

| `@icongo/iu` | [![npm version](https://img.shields.io/npm/v/@icongo/iu.svg)](https://www.npmjs.com/package/@icongo/iu) | [`#preview`](https://icongo.github.io/#/icons/iu/) |

| `@icongo/ix` | [![npm version](https://img.shields.io/npm/v/@icongo/ix.svg)](https://www.npmjs.com/package/@icongo/ix) | [`#preview`](https://icongo.github.io/#/icons/ix/) |

| `@icongo/ji` | [![npm version](https://img.shields.io/npm/v/@icongo/ji.svg)](https://www.npmjs.com/package/@icongo/ji) | [`#preview`](https://icongo.github.io/#/icons/ji/) |

| `@icongo/la` | [![npm version](https://img.shields.io/npm/v/@icongo/la.svg)](https://www.npmjs.com/package/@icongo/la) | [`#preview`](https://icongo.github.io/#/icons/la/) |

| `@icongo/lg` | [![npm version](https://img.shields.io/npm/v/@icongo/lg.svg)](https://www.npmjs.com/package/@icongo/lg) | [`#preview`](https://icongo.github.io/#/icons/lg/) |

| `@icongo/li` | [![npm version](https://img.shields.io/npm/v/@icongo/li.svg)](https://www.npmjs.com/package/@icongo/li) | [`#preview`](https://icongo.github.io/#/icons/li/) |

| `@icongo/lu` | [![npm version](https://img.shields.io/npm/v/@icongo/lu.svg)](https://www.npmjs.com/package/@icongo/lu) | [`#preview`](https://icongo.github.io/#/icons/lu/) |

| `@icongo/mc` | [![npm version](https://img.shields.io/npm/v/@icongo/mc.svg)](https://www.npmjs.com/package/@icongo/mc) | [`#preview`](https://icongo.github.io/#/icons/mc/) |

| `@icongo/md` | [![npm version](https://img.shields.io/npm/v/@icongo/md.svg)](https://www.npmjs.com/package/@icongo/md) | [`#preview`](https://icongo.github.io/#/icons/md/) |

| `@icongo/mi` | [![npm version](https://img.shields.io/npm/v/@icongo/mi.svg)](https://www.npmjs.com/package/@icongo/mi) | [`#preview`](https://icongo.github.io/#/icons/mi/) |

| `@icongo/mn` | [![npm version](https://img.shields.io/npm/v/@icongo/mn.svg)](https://www.npmjs.com/package/@icongo/mn) | [`#preview`](https://icongo.github.io/#/icons/mn/) |

| `@icongo/mp` | [![npm version](https://img.shields.io/npm/v/@icongo/mp.svg)](https://www.npmjs.com/package/@icongo/mp) | [`#preview`](https://icongo.github.io/#/icons/mp/) |

| `@icongo/mr` | [![npm version](https://img.shields.io/npm/v/@icongo/mr.svg)](https://www.npmjs.com/package/@icongo/mr) | [`#preview`](https://icongo.github.io/#/icons/mr/) |

| `@icongo/pbi` | [![npm version](https://img.shields.io/npm/v/@icongo/pbi.svg)](https://www.npmjs.com/package/@icongo/pbi) | [`#preview`](https://icongo.github.io/#/icons/pbi/) |

| `@icongo/pk` | [![npm version](https://img.shields.io/npm/v/@icongo/pk.svg)](https://www.npmjs.com/package/@icongo/pk) | [`#preview`](https://icongo.github.io/#/icons/pk/) |

| `@icongo/pp` | [![npm version](https://img.shields.io/npm/v/@icongo/pp.svg)](https://www.npmjs.com/package/@icongo/pp) | [`#preview`](https://icongo.github.io/#/icons/pp/) |

| `@icongo/ps` | [![npm version](https://img.shields.io/npm/v/@icongo/ps.svg)](https://www.npmjs.com/package/@icongo/ps) | [`#preview`](https://icongo.github.io/#/icons/ps/) |

| `@icongo/ri` | [![npm version](https://img.shields.io/npm/v/@icongo/ri.svg)](https://www.npmjs.com/package/@icongo/ri) | [`#preview`](https://icongo.github.io/#/icons/ri/) |

| `@icongo/scwi` | [![npm version](https://img.shields.io/npm/v/@icongo/scwi.svg)](https://www.npmjs.com/package/@icongo/scwi) | [`#preview`](https://icongo.github.io/#/icons/scwi/) |

| `@icongo/si` | [![npm version](https://img.shields.io/npm/v/@icongo/si.svg)](https://www.npmjs.com/package/@icongo/si) | [`#preview`](https://icongo.github.io/#/icons/si/) |

| `@icongo/sk` | [![npm version](https://img.shields.io/npm/v/@icongo/sk.svg)](https://www.npmjs.com/package/@icongo/sk) | [`#preview`](https://icongo.github.io/#/icons/sk/) |

| `@icongo/sl` | [![npm version](https://img.shields.io/npm/v/@icongo/sl.svg)](https://www.npmjs.com/package/@icongo/sl) | [`#preview`](https://icongo.github.io/#/icons/sl/) |

| `@icongo/sn` | [![npm version](https://img.shields.io/npm/v/@icongo/sn.svg)](https://www.npmjs.com/package/@icongo/sn) | [`#preview`](https://icongo.github.io/#/icons/sn/) |

| `@icongo/sti` | [![npm version](https://img.shields.io/npm/v/@icongo/sti.svg)](https://www.npmjs.com/package/@icongo/sti) | [`#preview`](https://icongo.github.io/#/icons/sti/) |

| `@icongo/tb` | [![npm version](https://img.shields.io/npm/v/@icongo/tb.svg)](https://www.npmjs.com/package/@icongo/tb) | [`#preview`](https://icongo.github.io/#/icons/tb/) |

| `@icongo/ti` | [![npm version](https://img.shields.io/npm/v/@icongo/ti.svg)](https://www.npmjs.com/package/@icongo/ti) | [`#preview`](https://icongo.github.io/#/icons/ti/) |

| `@icongo/tii` | [![npm version](https://img.shields.io/npm/v/@icongo/tii.svg)](https://www.npmjs.com/package/@icongo/tii) | [`#preview`](https://icongo.github.io/#/icons/tii/) |

| `@icongo/tn` | [![npm version](https://img.shields.io/npm/v/@icongo/tn.svg)](https://www.npmjs.com/package/@icongo/tn) | [`#preview`](https://icongo.github.io/#/icons/tn/) |

| `@icongo/uiw` | [![npm version](https://img.shields.io/npm/v/@icongo/uiw.svg)](https://www.npmjs.com/package/@icongo/uiw) | [`#preview`](https://icongo.github.io/#/icons/uiw/) |

| `@icongo/vl` | [![npm version](https://img.shields.io/npm/v/@icongo/vl.svg)](https://www.npmjs.com/package/@icongo/vl) | [`#preview`](https://icongo.github.io/#/icons/vl/) |

| `@icongo/vsc` | [![npm version](https://img.shields.io/npm/v/@icongo/vsc.svg)](https://www.npmjs.com/package/@icongo/vsc) | [`#preview`](https://icongo.github.io/#/icons/vsc/) |

| `@icongo/vsi` | [![npm version](https://img.shields.io/npm/v/@icongo/vsi.svg)](https://www.npmjs.com/package/@icongo/vsi) | [`#preview`](https://icongo.github.io/#/icons/vsi/) |

| `@icongo/vv` | [![npm version](https://img.shields.io/npm/v/@icongo/vv.svg)](https://www.npmjs.com/package/@icongo/vv) | [`#preview`](https://icongo.github.io/#/icons/vv/) |

| `@icongo/wi` | [![npm version](https://img.shields.io/npm/v/@icongo/wi.svg)](https://www.npmjs.com/package/@icongo/wi) | [`#preview`](https://icongo.github.io/#/icons/wi/) |

| `@icongo/wl` | [![npm version](https://img.shields.io/npm/v/@icongo/wl.svg)](https://www.npmjs.com/package/@icongo/wl) | [`#preview`](https://icongo.github.io/#/icons/wl/) |

## Usage

```jsx

import { DIAndroid } from "@icongo/di";

import { STIApple } from '@icongo/sti/lib/STIApple';

function Demo() {

  return (

    


      

      

    

  )

}

```

## icongo

```bash

npm i icongo

```

```shell

Usage: icongo [options] [--help|h]

Options:

  --output, -o            Output the svg icon component to the specified directory. Default: "components"

  --source, -s            svg icon folder. Default: "icons"

  --prefix                SVG component name prefix.

  --filter                Matching some icons does not generate components.

  --rename, -r            Icon rename E.g: '{"jet-pack": "JetPack1"}'.

  --config, -c            SVGR supports project configuration files for SVGR, SVGO and Prettier.

  --version, -v           Show version number

  --help, -h              Displays help information.

Example:

  npm icongo --output components

  npm icongo --source icons

  npm icongo --source icons --config='{"svgProps": {"viewBox": "0 0 20 20"}}'

  npm icongo -s svg -o src -r '{"jet-pack": "JetPack1"}'

  npm icongo --source icons --filter='(calendar).svg'

  npm s2r --source icons

```

**Usage**

```json

{

  "name": "@wcjiang/icons",

  "version": "0.0.1",

  "main": "./lib/index.js",

  "module": "./esm/index.js",

  "types": "./lib/index.d.ts",

  "scripts": {

    "build": "tsbb build src/*.tsx --useBabel",

    "start": "icongo --prefix BS --source data/icons -o ./src"

  },

  "devDependencies": {

    "icongo": "*",

    "tsbb": "^4.0.3"

  }

}

```

## Docker

The Icons search website can be deployed to your personal server via docker.

```shell

docker pull wcjiang/icongo

# Or

docker pull ghcr.io/jaywcjlove/icongo:latest

```

```shell

docker run --name icongo --rm -d -p 9112:80 wcjiang/icongo:latest

# Or

docker run --name icongo -itd -p 9112:80 wcjiang/icongo:latest

# Or

docker run --name icongo -itd -p 9112:80 ghcr.io/jaywcjlove/icongo:latest

```

Visit the following URL in your browser:

http://localhost:9112/

## License

Licensed under the MIT License.