├── ss1.png
├── icon1.png
├── icon2.png
├── .gitignore
├── .svgrrc.js
├── template.js
├── .github
└── workflows
│ └── publish-to-npm.yml
├── rollup.config.mjs
├── tsconfig.json
├── LICENSE
├── src
├── CyberEl75.tsx
├── CyberEl64.tsx
├── CyberEl67.tsx
├── CyberEl68.tsx
├── CyberEl54.tsx
├── CyberEl80.tsx
├── CyberEl66.tsx
├── CyberEl62.tsx
├── CyberEl53.tsx
├── CyberEl72.tsx
├── CyberEl65.tsx
├── CyberEl63.tsx
├── CyberEl79.tsx
├── CyberEl45.tsx
├── CyberEl8.tsx
├── CyberEl39.tsx
├── CyberEl78.tsx
├── CyberEl50.tsx
├── CyberEl55.tsx
├── CyberEl49.tsx
├── CyberEl34.tsx
├── CyberEl46.tsx
├── CyberEl73.tsx
├── CyberEl6.tsx
├── CyberEl5.tsx
├── CyberEl7.tsx
├── CyberEl35.tsx
├── CyberEl3.tsx
├── CyberEl77.tsx
├── CyberEl36.tsx
├── CyberEl16.tsx
├── CyberEl58.tsx
├── CyberEl21.tsx
├── CyberEl41.tsx
├── CyberEl24.tsx
├── CyberEl56.tsx
├── CyberEl40.tsx
├── CyberEl71.tsx
├── CyberEl69.tsx
├── CyberEl86.tsx
├── CyberEl59.tsx
├── CyberEl4.tsx
├── CyberEl57.tsx
├── CyberEl20.tsx
├── CyberEl52.tsx
├── CyberEl17.tsx
├── index.ts
├── CyberEl37.tsx
├── CyberEl42.tsx
├── CyberEl60.tsx
├── CyberEl29.tsx
├── CyberEl18.tsx
├── CyberEl48.tsx
├── CyberEl61.tsx
├── CyberEl76.tsx
├── CyberEl28.tsx
├── CyberEl2.tsx
├── CyberEl15.tsx
├── CyberEl1.tsx
├── CyberEl32.tsx
└── CyberEl33.tsx
├── package.json
└── README.md
/ss1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiswallz/react-cyber-elements/HEAD/ss1.png
--------------------------------------------------------------------------------
/icon1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiswallz/react-cyber-elements/HEAD/icon1.png
--------------------------------------------------------------------------------
/icon2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thiswallz/react-cyber-elements/HEAD/icon2.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /es
2 | /lib
3 | /node_modules
4 | /umd
5 | npm-debug.log*
6 | .vscode
7 | .DS_Store
--------------------------------------------------------------------------------
/.svgrrc.js:
--------------------------------------------------------------------------------
1 | // .svgrrc.js
2 | module.exports = {
3 | template: require('./template'),
4 | typescript: true
5 | }
6 |
--------------------------------------------------------------------------------
/template.js:
--------------------------------------------------------------------------------
1 | const propTypesTemplate = (
2 | { imports, interfaces, componentName, props, jsx, exports },
3 | { tpl },
4 | ) => {
5 | return tpl`
6 | import React, { CSSProperties } from 'react';
7 |
8 | type CyberElProps = {
9 | id?: string;
10 | className?: string;
11 | style?: CSSProperties;
12 | [x: string]: any;
13 | }
14 |
15 | const ${componentName}= (props: CyberElProps) => {
16 | return (
17 | ${jsx}
18 | )
19 | }
20 |
21 | ${exports}
22 | `
23 | }
24 |
25 | module.exports = propTypesTemplate
26 |
--------------------------------------------------------------------------------
/.github/workflows/publish-to-npm.yml:
--------------------------------------------------------------------------------
1 | name: publish-npm
2 |
3 | on:
4 | release:
5 | types: [published]
6 | workflow_dispatch:
7 |
8 | jobs:
9 | publish-npm:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v3
13 | - uses: actions/setup-node@v3
14 | with:
15 | node-version: 18
16 | registry-url: https://registry.npmjs.org
17 | - run: npm ci && npm run build
18 | - run: npm publish --access=public
19 | env:
20 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
--------------------------------------------------------------------------------
/rollup.config.mjs:
--------------------------------------------------------------------------------
1 | import commonjs from "@rollup/plugin-commonjs";
2 | import resolve from "@rollup/plugin-node-resolve";
3 | import typescript from "@rollup/plugin-typescript";
4 | import peerDepsExternal from 'rollup-plugin-peer-deps-external';
5 | import terser from '@rollup/plugin-terser';
6 |
7 | import pkg from './package.json' assert { type: 'json' };
8 |
9 | export default [
10 | {
11 | input: "src/index.ts",
12 | output: [
13 | {
14 | file: pkg.main,
15 | format: "cjs",
16 | sourcemap: true,
17 | },
18 | {
19 | file: pkg.module,
20 | format: "esm",
21 | sourcemap: true,
22 | },
23 | ],
24 | plugins: [
25 | peerDepsExternal(),
26 | resolve(),
27 | commonjs(),
28 | typescript({ tsconfig: "./tsconfig.json" }),
29 | terser(),
30 | ],
31 | }
32 | ];
33 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
4 | "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
5 | "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
6 | "strict": true, /* Enable all strict type-checking options. */
7 | "skipLibCheck": true /* Skip type checking all .d.ts files. */,
8 | "jsx": "react",
9 | "module": "ESNext",
10 | "declaration": true,
11 | "declarationDir": "lib",
12 | "sourceMap": true,
13 | "outDir": "lib",
14 | "moduleResolution": "node",
15 | "allowSyntheticDefaultImports": true,
16 | "emitDeclarationOnly": true,
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Mau Joost
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 |
--------------------------------------------------------------------------------
/src/CyberEl75.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl75 = (props: CyberElProps) => {
9 | return (
10 |
50 | );
51 | };
52 | export default SvgCyberEl75;
53 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-cyber-elements",
3 | "version": "1.0.2",
4 | "description": "Free Cyberpunk Elements for React",
5 | "main": "./lib/cjs/index.js",
6 | "module": "./lib/esm/index.js",
7 | "types": "./lib/esm/index.d.ts",
8 | "files": [
9 | "/lib"
10 | ],
11 | "scripts": {
12 | "build": "rollup -c",
13 | "generate:svgs": "npx @svgr/cli --out-dir src -- svgs",
14 | "build:watch": "rollup -c --watch"
15 | },
16 | "devDependencies": {
17 | "@rollup/plugin-commonjs": "^23.0.2",
18 | "@rollup/plugin-node-resolve": "^15.0.1",
19 | "@rollup/plugin-terser": "^0.1.0",
20 | "@rollup/plugin-typescript": "^9.0.2",
21 | "@svgr/cli": "^6.5.1",
22 | "@types/react": "^18.0.21",
23 | "@types/react-dom": "^18.0.6",
24 | "react": "^18.2.0",
25 | "react-dom": "^18.2.0",
26 | "rollup": "^3.2.3",
27 | "rollup-plugin-peer-deps-external": "^2.2.4",
28 | "tslib": "^2.4.1",
29 | "typescript": "^4.8.4"
30 | },
31 | "repository": {
32 | "type": "git",
33 | "url": "https://github.com/thiswallz/react-cyber-elements.git"
34 | },
35 | "author": "Mau BJW",
36 | "license": "MIT",
37 | "keywords": [
38 | "react-icons",
39 | "react-svgs",
40 | "react-library",
41 | "elements",
42 | "typescript",
43 | "react",
44 | "template"
45 | ],
46 | "peerDependencies": {
47 | "react": "^16 || ^17 || ^18",
48 | "react-dom": "^16 || ^17 || ^18"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/CyberEl64.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl64 = (props: CyberElProps) => {
9 | return (
10 |
48 | );
49 | };
50 | export default SvgCyberEl64;
51 |
--------------------------------------------------------------------------------
/src/CyberEl67.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl67 = (props: CyberElProps) => {
9 | return (
10 |
55 | );
56 | };
57 | export default SvgCyberEl67;
58 |
--------------------------------------------------------------------------------
/src/CyberEl68.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl68 = (props: CyberElProps) => {
9 | return (
10 |
53 | );
54 | };
55 | export default SvgCyberEl68;
56 |
--------------------------------------------------------------------------------
/src/CyberEl54.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl54 = (props: CyberElProps) => {
9 | return (
10 |
53 | );
54 | };
55 | export default SvgCyberEl54;
56 |
--------------------------------------------------------------------------------
/src/CyberEl80.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl80 = (props: CyberElProps) => {
9 | return (
10 |
47 | );
48 | };
49 | export default SvgCyberEl80;
50 |
--------------------------------------------------------------------------------
/src/CyberEl66.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl66 = (props: CyberElProps) => {
9 | return (
10 |
62 | );
63 | };
64 | export default SvgCyberEl66;
65 |
--------------------------------------------------------------------------------
/src/CyberEl62.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl62 = (props: CyberElProps) => {
9 | return (
10 |
49 | );
50 | };
51 | export default SvgCyberEl62;
52 |
--------------------------------------------------------------------------------
/src/CyberEl53.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl53 = (props: CyberElProps) => {
9 | return (
10 |
57 | );
58 | };
59 | export default SvgCyberEl53;
60 |
--------------------------------------------------------------------------------
/src/CyberEl72.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl72 = (props: CyberElProps) => {
9 | return (
10 |
52 | );
53 | };
54 | export default SvgCyberEl72;
55 |
--------------------------------------------------------------------------------
/src/CyberEl65.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl65 = (props: CyberElProps) => {
9 | return (
10 |
55 | );
56 | };
57 | export default SvgCyberEl65;
58 |
--------------------------------------------------------------------------------
/src/CyberEl63.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl63 = (props: CyberElProps) => {
9 | return (
10 |
49 | );
50 | };
51 | export default SvgCyberEl63;
52 |
--------------------------------------------------------------------------------
/src/CyberEl79.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl79 = (props: CyberElProps) => {
9 | return (
10 |
57 | );
58 | };
59 | export default SvgCyberEl79;
60 |
--------------------------------------------------------------------------------
/src/CyberEl45.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl45 = (props: CyberElProps) => {
9 | return (
10 |
53 | );
54 | };
55 | export default SvgCyberEl45;
56 |
--------------------------------------------------------------------------------
/src/CyberEl8.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl8 = (props: CyberElProps) => {
9 | return (
10 |
49 | );
50 | };
51 | export default SvgCyberEl8;
52 |
--------------------------------------------------------------------------------
/src/CyberEl39.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl39 = (props: CyberElProps) => {
9 | return (
10 |
73 | );
74 | };
75 | export default SvgCyberEl39;
76 |
--------------------------------------------------------------------------------
/src/CyberEl78.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl78 = (props: CyberElProps) => {
9 | return (
10 |
59 | );
60 | };
61 | export default SvgCyberEl78;
62 |
--------------------------------------------------------------------------------
/src/CyberEl50.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl50 = (props: CyberElProps) => {
9 | return (
10 |
62 | );
63 | };
64 | export default SvgCyberEl50;
65 |
--------------------------------------------------------------------------------
/src/CyberEl55.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl55 = (props: CyberElProps) => {
9 | return (
10 |
65 | );
66 | };
67 | export default SvgCyberEl55;
68 |
--------------------------------------------------------------------------------
/src/CyberEl49.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl49 = (props: CyberElProps) => {
9 | return (
10 |
62 | );
63 | };
64 | export default SvgCyberEl49;
65 |
--------------------------------------------------------------------------------
/src/CyberEl34.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl34 = (props: CyberElProps) => {
9 | return (
10 |
73 | );
74 | };
75 | export default SvgCyberEl34;
76 |
--------------------------------------------------------------------------------
/src/CyberEl46.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl46 = (props: CyberElProps) => {
9 | return (
10 |
57 | );
58 | };
59 | export default SvgCyberEl46;
60 |
--------------------------------------------------------------------------------
/src/CyberEl73.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl73 = (props: CyberElProps) => {
9 | return (
10 |
53 | );
54 | };
55 | export default SvgCyberEl73;
56 |
--------------------------------------------------------------------------------
/src/CyberEl6.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl6 = (props: CyberElProps) => {
9 | return (
10 |
49 | );
50 | };
51 | export default SvgCyberEl6;
52 |
--------------------------------------------------------------------------------
/src/CyberEl5.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl5 = (props: CyberElProps) => {
9 | return (
10 |
45 | );
46 | };
47 | export default SvgCyberEl5;
48 |
--------------------------------------------------------------------------------
/src/CyberEl7.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl7 = (props: CyberElProps) => {
9 | return (
10 |
44 | );
45 | };
46 | export default SvgCyberEl7;
47 |
--------------------------------------------------------------------------------
/src/CyberEl35.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl35 = (props: CyberElProps) => {
9 | return (
10 |
79 | );
80 | };
81 | export default SvgCyberEl35;
82 |
--------------------------------------------------------------------------------
/src/CyberEl3.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl3 = (props: CyberElProps) => {
9 | return (
10 |
49 | );
50 | };
51 | export default SvgCyberEl3;
52 |
--------------------------------------------------------------------------------
/src/CyberEl77.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl77 = (props: CyberElProps) => {
9 | return (
10 |
47 | );
48 | };
49 | export default SvgCyberEl77;
50 |
--------------------------------------------------------------------------------
/src/CyberEl36.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl36 = (props: CyberElProps) => {
9 | return (
10 |
88 | );
89 | };
90 | export default SvgCyberEl36;
91 |
--------------------------------------------------------------------------------
/src/CyberEl16.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl16 = (props: CyberElProps) => {
9 | return (
10 |
70 | );
71 | };
72 | export default SvgCyberEl16;
73 |
--------------------------------------------------------------------------------
/src/CyberEl58.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl58 = (props: CyberElProps) => {
9 | return (
10 |
117 | );
118 | };
119 | export default SvgCyberEl58;
120 |
--------------------------------------------------------------------------------
/src/CyberEl21.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl21 = (props: CyberElProps) => {
9 | return (
10 |
94 | );
95 | };
96 | export default SvgCyberEl21;
97 |
--------------------------------------------------------------------------------
/src/CyberEl41.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl41 = (props: CyberElProps) => {
9 | return (
10 |
103 | );
104 | };
105 | export default SvgCyberEl41;
106 |
--------------------------------------------------------------------------------
/src/CyberEl24.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl24 = (props: CyberElProps) => {
9 | return (
10 |
103 | );
104 | };
105 | export default SvgCyberEl24;
106 |
--------------------------------------------------------------------------------
/src/CyberEl56.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl56 = (props: CyberElProps) => {
9 | return (
10 |
127 | );
128 | };
129 | export default SvgCyberEl56;
130 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-cyber-elements
2 | +90 HUD cyberpunk elements. this is and will always be free.
3 |
4 |
5 | We want to create the biggest cyberpunk open-source project for you to make cool things.
6 |
7 | Thanks to all for caring!, seems you like the idea of our cyberpunk project, this are our future goals!
8 |
9 | ### Next steps:
10 |
11 | - +1.000 futuristics svg icons components for React, Vue, Svelte and Angular.
12 | - Add 200 more HUD elements to the currect 90 elements and make them also available to Vue, Svelte and Angular.
13 | - Wrapper and online storybook to make them easy to search and use in your app.
14 | - Create a fancy page where we show posibilities with our HUD elements, icons and others!
15 | - Make fancy assets for everyone (audio/web backgrounds/characters/etc)
16 |
17 |
18 |
19 | Demo: https://react-cyber-elements-demo.vercel.app/
20 |
21 |
22 |
23 | 
24 |
25 |
26 | 
27 |
28 |
29 | 
30 |
31 |
32 | 
33 |
34 |
35 | 
36 |
37 |
38 | 
39 |
40 |
41 | 
42 |
43 |
44 |
45 |
46 |
47 |
48 | Welcome to react-cyber-elements
49 | You can change the color of the elements with just css.
50 |
51 | Simple usage: to
52 | Checkout the docs and sandbox for more info.
53 |
54 | ## Install
55 |
56 | npm
57 |
58 | ```
59 | npm install react-cyber-elements
60 | ```
61 |
62 | yarn
63 |
64 | ```
65 | yarn add react-cyber-elements
66 | ```
67 |
68 | ## Usage
69 |
70 | 
71 |
72 | ``` javascript
73 | import { CyberEl1 } from 'react-cyber-elements'
74 |
75 | export default function Home() {
76 | return (
77 |
83 | )
84 | }
85 | ```
86 |
87 | ## Changing colors
88 |
89 | You can just get access to each path and change stroke and fill properties.
90 |
91 | 
92 |
93 | ``` css
94 |
95 | .cyber-icon path:nth-of-type(1) {
96 | fill: #d600ff !important;
97 | stroke: orange;
98 | }
99 |
100 | .cyber-icon path:nth-of-type(2) {
101 | fill: #00b8ff !important;
102 | stroke: orange;
103 | }
104 |
105 | .cyber-icon path:nth-of-type(3) {
106 | fill: yellow !important;
107 | stroke: orange;
108 | }
109 |
110 | .cyber-icon path:nth-of-type(4) {
111 | fill: #001eff !important;
112 | stroke: orange;
113 | }
114 |
115 | .cyber-icon path:nth-of-type(5) {
116 | fill: #bd00ff !important;
117 | }
118 | ```
119 |
--------------------------------------------------------------------------------
/src/CyberEl40.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl40 = (props: CyberElProps) => {
9 | return (
10 |
118 | );
119 | };
120 | export default SvgCyberEl40;
121 |
--------------------------------------------------------------------------------
/src/CyberEl71.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl71 = (props: CyberElProps) => {
9 | return (
10 |
50 | );
51 | };
52 | export default SvgCyberEl71;
53 |
--------------------------------------------------------------------------------
/src/CyberEl69.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl69 = (props: CyberElProps) => {
9 | return (
10 |
119 | );
120 | };
121 | export default SvgCyberEl69;
122 |
--------------------------------------------------------------------------------
/src/CyberEl86.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl86 = (props: CyberElProps) => {
9 | return (
10 |
87 | );
88 | };
89 | export default SvgCyberEl86;
90 |
--------------------------------------------------------------------------------
/src/CyberEl59.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl59 = (props: CyberElProps) => {
9 | return (
10 |
102 | );
103 | };
104 | export default SvgCyberEl59;
105 |
--------------------------------------------------------------------------------
/src/CyberEl4.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl4 = (props: CyberElProps) => {
9 | return (
10 |
57 | );
58 | };
59 | export default SvgCyberEl4;
60 |
--------------------------------------------------------------------------------
/src/CyberEl57.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl57 = (props: CyberElProps) => {
9 | return (
10 |
128 | );
129 | };
130 | export default SvgCyberEl57;
131 |
--------------------------------------------------------------------------------
/src/CyberEl20.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl20 = (props: CyberElProps) => {
9 | return (
10 |
114 | );
115 | };
116 | export default SvgCyberEl20;
117 |
--------------------------------------------------------------------------------
/src/CyberEl52.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl52 = (props: CyberElProps) => {
9 | return (
10 |
129 | );
130 | };
131 | export default SvgCyberEl52;
132 |
--------------------------------------------------------------------------------
/src/CyberEl17.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl17 = (props: CyberElProps) => {
9 | return (
10 |
65 | );
66 | };
67 | export default SvgCyberEl17;
68 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as CyberEl1 } from "./CyberEl1";
2 | export { default as CyberEl10 } from "./CyberEl10";
3 | export { default as CyberEl11 } from "./CyberEl11";
4 | export { default as CyberEl12 } from "./CyberEl12";
5 | export { default as CyberEl13 } from "./CyberEl13";
6 | export { default as CyberEl14 } from "./CyberEl14";
7 | export { default as CyberEl15 } from "./CyberEl15";
8 | export { default as CyberEl16 } from "./CyberEl16";
9 | export { default as CyberEl17 } from "./CyberEl17";
10 | export { default as CyberEl18 } from "./CyberEl18";
11 | export { default as CyberEl19 } from "./CyberEl19";
12 | export { default as CyberEl2 } from "./CyberEl2";
13 | export { default as CyberEl20 } from "./CyberEl20";
14 | export { default as CyberEl21 } from "./CyberEl21";
15 | export { default as CyberEl22 } from "./CyberEl22";
16 | export { default as CyberEl23 } from "./CyberEl23";
17 | export { default as CyberEl24 } from "./CyberEl24";
18 | export { default as CyberEl25 } from "./CyberEl25";
19 | export { default as CyberEl26 } from "./CyberEl26";
20 | export { default as CyberEl27 } from "./CyberEl27";
21 | export { default as CyberEl28 } from "./CyberEl28";
22 | export { default as CyberEl29 } from "./CyberEl29";
23 | export { default as CyberEl3 } from "./CyberEl3";
24 | export { default as CyberEl30 } from "./CyberEl30";
25 | export { default as CyberEl31 } from "./CyberEl31";
26 | export { default as CyberEl32 } from "./CyberEl32";
27 | export { default as CyberEl33 } from "./CyberEl33";
28 | export { default as CyberEl34 } from "./CyberEl34";
29 | export { default as CyberEl35 } from "./CyberEl35";
30 | export { default as CyberEl36 } from "./CyberEl36";
31 | export { default as CyberEl37 } from "./CyberEl37";
32 | export { default as CyberEl38 } from "./CyberEl38";
33 | export { default as CyberEl39 } from "./CyberEl39";
34 | export { default as CyberEl4 } from "./CyberEl4";
35 | export { default as CyberEl40 } from "./CyberEl40";
36 | export { default as CyberEl41 } from "./CyberEl41";
37 | export { default as CyberEl42 } from "./CyberEl42";
38 | export { default as CyberEl43 } from "./CyberEl43";
39 | export { default as CyberEl44 } from "./CyberEl44";
40 | export { default as CyberEl45 } from "./CyberEl45";
41 | export { default as CyberEl46 } from "./CyberEl46";
42 | export { default as CyberEl47 } from "./CyberEl47";
43 | export { default as CyberEl48 } from "./CyberEl48";
44 | export { default as CyberEl49 } from "./CyberEl49";
45 | export { default as CyberEl5 } from "./CyberEl5";
46 | export { default as CyberEl50 } from "./CyberEl50";
47 | export { default as CyberEl51 } from "./CyberEl51";
48 | export { default as CyberEl52 } from "./CyberEl52";
49 | export { default as CyberEl53 } from "./CyberEl53";
50 | export { default as CyberEl54 } from "./CyberEl54";
51 | export { default as CyberEl55 } from "./CyberEl55";
52 | export { default as CyberEl56 } from "./CyberEl56";
53 | export { default as CyberEl57 } from "./CyberEl57";
54 | export { default as CyberEl58 } from "./CyberEl58";
55 | export { default as CyberEl59 } from "./CyberEl59";
56 | export { default as CyberEl6 } from "./CyberEl6";
57 | export { default as CyberEl60 } from "./CyberEl60";
58 | export { default as CyberEl61 } from "./CyberEl61";
59 | export { default as CyberEl62 } from "./CyberEl62";
60 | export { default as CyberEl63 } from "./CyberEl63";
61 | export { default as CyberEl64 } from "./CyberEl64";
62 | export { default as CyberEl65 } from "./CyberEl65";
63 | export { default as CyberEl66 } from "./CyberEl66";
64 | export { default as CyberEl67 } from "./CyberEl67";
65 | export { default as CyberEl68 } from "./CyberEl68";
66 | export { default as CyberEl69 } from "./CyberEl69";
67 | export { default as CyberEl7 } from "./CyberEl7";
68 | export { default as CyberEl70 } from "./CyberEl70";
69 | export { default as CyberEl71 } from "./CyberEl71";
70 | export { default as CyberEl72 } from "./CyberEl72";
71 | export { default as CyberEl73 } from "./CyberEl73";
72 | export { default as CyberEl74 } from "./CyberEl74";
73 | export { default as CyberEl75 } from "./CyberEl75";
74 | export { default as CyberEl76 } from "./CyberEl76";
75 | export { default as CyberEl77 } from "./CyberEl77";
76 | export { default as CyberEl78 } from "./CyberEl78";
77 | export { default as CyberEl79 } from "./CyberEl79";
78 | export { default as CyberEl8 } from "./CyberEl8";
79 | export { default as CyberEl80 } from "./CyberEl80";
80 | export { default as CyberEl81 } from "./CyberEl81";
81 | export { default as CyberEl82 } from "./CyberEl82";
82 | export { default as CyberEl83 } from "./CyberEl83";
83 | export { default as CyberEl84 } from "./CyberEl84";
84 | export { default as CyberEl85 } from "./CyberEl85";
85 | export { default as CyberEl86 } from "./CyberEl86";
86 | export { default as CyberEl87 } from "./CyberEl87";
87 | export { default as CyberEl88 } from "./CyberEl88";
88 | export { default as CyberEl89 } from "./CyberEl89";
89 | export { default as CyberEl9 } from "./CyberEl9";
90 | export { default as CyberEl90 } from "./CyberEl90";
91 |
--------------------------------------------------------------------------------
/src/CyberEl37.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl37 = (props: CyberElProps) => {
9 | return (
10 |
148 | );
149 | };
150 | export default SvgCyberEl37;
151 |
--------------------------------------------------------------------------------
/src/CyberEl42.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl42 = (props: CyberElProps) => {
9 | return (
10 |
148 | );
149 | };
150 | export default SvgCyberEl42;
151 |
--------------------------------------------------------------------------------
/src/CyberEl60.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl60 = (props: CyberElProps) => {
9 | return (
10 |
148 | );
149 | };
150 | export default SvgCyberEl60;
151 |
--------------------------------------------------------------------------------
/src/CyberEl29.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl29 = (props: CyberElProps) => {
9 | return (
10 |
101 | );
102 | };
103 | export default SvgCyberEl29;
104 |
--------------------------------------------------------------------------------
/src/CyberEl18.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl18 = (props: CyberElProps) => {
9 | return (
10 |
74 | );
75 | };
76 | export default SvgCyberEl18;
77 |
--------------------------------------------------------------------------------
/src/CyberEl48.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl48 = (props: CyberElProps) => {
9 | return (
10 |
69 | );
70 | };
71 | export default SvgCyberEl48;
72 |
--------------------------------------------------------------------------------
/src/CyberEl61.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl61 = (props: CyberElProps) => {
9 | return (
10 |
151 | );
152 | };
153 | export default SvgCyberEl61;
154 |
--------------------------------------------------------------------------------
/src/CyberEl76.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl76 = (props: CyberElProps) => {
9 | return (
10 |
73 | );
74 | };
75 | export default SvgCyberEl76;
76 |
--------------------------------------------------------------------------------
/src/CyberEl28.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl28 = (props: CyberElProps) => {
9 | return (
10 |
169 | );
170 | };
171 | export default SvgCyberEl28;
172 |
--------------------------------------------------------------------------------
/src/CyberEl2.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl2 = (props: CyberElProps) => {
9 | return (
10 |
52 | );
53 | };
54 | export default SvgCyberEl2;
55 |
--------------------------------------------------------------------------------
/src/CyberEl15.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl15 = (props: CyberElProps) => {
9 | return (
10 |
91 | );
92 | };
93 | export default SvgCyberEl15;
94 |
--------------------------------------------------------------------------------
/src/CyberEl1.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl1 = (props: CyberElProps) => {
9 | return (
10 |
59 | );
60 | };
61 | export default SvgCyberEl1;
62 |
--------------------------------------------------------------------------------
/src/CyberEl32.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl32 = (props: CyberElProps) => {
9 | return (
10 |
163 | );
164 | };
165 | export default SvgCyberEl32;
166 |
--------------------------------------------------------------------------------
/src/CyberEl33.tsx:
--------------------------------------------------------------------------------
1 | import React, { CSSProperties } from "react";
2 | type CyberElProps = {
3 | id?: string,
4 | className?: string,
5 | style?: CSSProperties,
6 | [x: string]: any,
7 | };
8 | const SvgCyberEl33 = (props: CyberElProps) => {
9 | return (
10 |
184 | );
185 | };
186 | export default SvgCyberEl33;
187 |
--------------------------------------------------------------------------------