@bigbinary/neeto-icons 1.8.4 → 1.8.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/publish.yml +26 -0
- package/dist/neeto-icons.js +1 -1
- package/example/index.html +13 -0
- package/example/src/Dashboard/Header.js +52 -0
- package/example/src/Dashboard/IconList/IconItem.js +33 -0
- package/example/src/Dashboard/IconList/index.js +20 -0
- package/example/src/Dashboard/index.js +17 -0
- package/example/src/index.css +11 -0
- package/example/src/index.js +12 -0
- package/package.json +12 -3
- package/webpack.dev.config.js +74 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
|
5
|
+
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title>neetoIcons</title>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
export default function Header({ searchTerm, setSearchTerm }) {
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
<header className="flex items-center justify-between px-8 py-4">
|
|
7
|
+
<div>
|
|
8
|
+
<h1 className="text-2xl font-bold">neetoIcons</h1>
|
|
9
|
+
<div className="text-sm text-gray-500">
|
|
10
|
+
Click on an icon to copy the name.
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<div className="flex items-center">
|
|
14
|
+
<a
|
|
15
|
+
href="https://github.com/bigbinary/neeto-icons#usage"
|
|
16
|
+
target="_blank"
|
|
17
|
+
rel="noreferrer"
|
|
18
|
+
className="flex items-center space-x-0.5 text-sm font-medium text-gray-600 hover:text-gray-900 mr-5"
|
|
19
|
+
>
|
|
20
|
+
Usage
|
|
21
|
+
</a>
|
|
22
|
+
<a
|
|
23
|
+
href="https://github.com/bigbinary/neeto-icons"
|
|
24
|
+
target="_blank"
|
|
25
|
+
rel="noreferrer"
|
|
26
|
+
className="flex items-center space-x-0.5 text-sm font-medium text-gray-600 hover:text-gray-900 mr-8"
|
|
27
|
+
>
|
|
28
|
+
<svg
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
viewBox="0 0 24 24"
|
|
31
|
+
width="18"
|
|
32
|
+
height="18"
|
|
33
|
+
>
|
|
34
|
+
<path fill="none" d="M0 0h24v24H0z" />
|
|
35
|
+
<path
|
|
36
|
+
fill="currentColor"
|
|
37
|
+
d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
|
|
38
|
+
/>
|
|
39
|
+
</svg>
|
|
40
|
+
<span>Source</span>
|
|
41
|
+
</a>
|
|
42
|
+
<input
|
|
43
|
+
placeholder="Search for an icon"
|
|
44
|
+
value={searchTerm}
|
|
45
|
+
onChange={(e) => setSearchTerm(e.target.value)}
|
|
46
|
+
className="px-4 py-2 text-sm rounded w-72 bg-gray-50 focus:outline-none focus:bg-gray-100"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</header>
|
|
50
|
+
</>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import copy from "copy-to-clipboard";
|
|
4
|
+
import toast from "react-hot-toast";
|
|
5
|
+
|
|
6
|
+
import * as Icons from "../../../../lib";
|
|
7
|
+
|
|
8
|
+
export default function IconItem({ name }) {
|
|
9
|
+
console.log(Icons);
|
|
10
|
+
const Icon = Icons[name];
|
|
11
|
+
const copyName = () => {
|
|
12
|
+
copy(name);
|
|
13
|
+
toast(`${name} has been copied to clipboard.`, {
|
|
14
|
+
icon: "🎉",
|
|
15
|
+
style: {
|
|
16
|
+
borderRadius: "4px",
|
|
17
|
+
background: "#1e1e20",
|
|
18
|
+
color: "#fff",
|
|
19
|
+
padding: "4px 8px",
|
|
20
|
+
fontSize: 14,
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
return (
|
|
25
|
+
<div
|
|
26
|
+
onClick={copyName}
|
|
27
|
+
className="flex flex-col items-center justify-center col-span-1 p-8 transition-all transform bg-white border rounded cursor-pointer hover:bg-gray-100"
|
|
28
|
+
>
|
|
29
|
+
<Icon size={24} color="#68737D" />
|
|
30
|
+
<div className="mt-2 text-xs text-gray-700">{name}</div>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import IconItem from "./IconItem";
|
|
4
|
+
|
|
5
|
+
import { iconList } from "../../../../lib";
|
|
6
|
+
|
|
7
|
+
export default function IconList({ searchTerm }) {
|
|
8
|
+
const filteredIconList = iconList.filter((name) =>
|
|
9
|
+
name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
10
|
+
);
|
|
11
|
+
return filteredIconList.length === 0 ? (
|
|
12
|
+
<div className="px-8 text-sm text-gray-600">No icons found.</div>
|
|
13
|
+
) : (
|
|
14
|
+
<div className="grid w-full grid-cols-3 gap-4 px-8 py-4 md:grid-cols-6 lg:grid-cols-10">
|
|
15
|
+
{filteredIconList.map((name) => (
|
|
16
|
+
<IconItem key={name} name={name} />
|
|
17
|
+
))}
|
|
18
|
+
</div>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import Header from "./Header";
|
|
3
|
+
import IconList from "./IconList";
|
|
4
|
+
import { Toaster } from "react-hot-toast";
|
|
5
|
+
|
|
6
|
+
function Dashboard() {
|
|
7
|
+
const [searchTerm, setSearchTerm] = useState("");
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<Toaster position="bottom-center" />
|
|
11
|
+
<Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
|
|
12
|
+
<IconList searchTerm={searchTerm} />
|
|
13
|
+
</>
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export default Dashboard;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@tailwind base;
|
|
2
|
+
@tailwind utilities;
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
margin: 0;
|
|
6
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
|
7
|
+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
8
|
+
sans-serif;
|
|
9
|
+
-webkit-font-smoothing: antialiased;
|
|
10
|
+
-moz-osx-font-smoothing: grayscale;
|
|
11
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-icons",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.10",
|
|
4
4
|
"main": "./dist/neeto-icons.js",
|
|
5
5
|
"author": "vinay0x",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
8
|
+
"start": "NODE_ENV=development webpack serve --open --mode development --config webpack.dev.config.js",
|
|
9
|
+
"build-preview": "NODE_ENV=production webpack --mode production --config webpack.dev.config.js",
|
|
8
10
|
"generate": "node build/index.js",
|
|
9
11
|
"webpack-compile": "NODE_ENV=production webpack --mode production",
|
|
10
12
|
"build": "yarn generate && yarn webpack-compile"
|
|
@@ -16,15 +18,22 @@
|
|
|
16
18
|
"babel-loader": "^8.2.2",
|
|
17
19
|
"camelcase": "^6.2.0",
|
|
18
20
|
"cheerio": "^1.0.0-rc.10",
|
|
21
|
+
"copy-to-clipboard": "^3.3.1",
|
|
22
|
+
"css-loader": "^6.5.1",
|
|
19
23
|
"ejs": "^3.1.6",
|
|
20
24
|
"file-loader": "^6.2.0",
|
|
21
25
|
"glob": "^7.1.7",
|
|
26
|
+
"html-loader": "^3.0.1",
|
|
27
|
+
"html-webpack-plugin": "^4.5.0",
|
|
22
28
|
"mkdirp": "^1.0.4",
|
|
23
29
|
"path": "^0.12.7",
|
|
24
30
|
"prettier": "^2.3.1",
|
|
31
|
+
"react-hot-toast": "^2.1.1",
|
|
32
|
+
"style-loader": "^3.3.1",
|
|
25
33
|
"uppercamelcase": "^3.0.0",
|
|
26
|
-
"webpack": "^5.
|
|
27
|
-
"webpack-cli": "^4.
|
|
34
|
+
"webpack": "^5.64.1",
|
|
35
|
+
"webpack-cli": "^4.9.1",
|
|
36
|
+
"webpack-dev-server": "^4.5.0"
|
|
28
37
|
},
|
|
29
38
|
"dependencies": {
|
|
30
39
|
"prop-types": "^15.7.2",
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const HtmlWebPackPlugin = require("html-webpack-plugin");
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
entry: "./example/src/index.js",
|
|
6
|
+
devtool: "eval-cheap-source-map",
|
|
7
|
+
module: {
|
|
8
|
+
rules: [
|
|
9
|
+
{
|
|
10
|
+
test: /\.md$/i,
|
|
11
|
+
use: "raw-loader",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
test: /\.(js|jsx)$/,
|
|
15
|
+
exclude: /node_modules/,
|
|
16
|
+
include: [path.resolve(__dirname, "example")],
|
|
17
|
+
use: [
|
|
18
|
+
{
|
|
19
|
+
loader: "babel-loader",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
test: /\.(js|jsx)$/,
|
|
25
|
+
exclude: /node_modules/,
|
|
26
|
+
include: [path.resolve(__dirname, "lib")],
|
|
27
|
+
use: [
|
|
28
|
+
{
|
|
29
|
+
loader: "babel-loader",
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
test: /\.html$/,
|
|
35
|
+
use: [
|
|
36
|
+
{
|
|
37
|
+
loader: "html-loader",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
test: /\.(png|jpe?g|gif|svg)$/i,
|
|
43
|
+
use: [
|
|
44
|
+
{
|
|
45
|
+
loader: "file-loader",
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
test: /\.s[ac]ss|css$/i,
|
|
51
|
+
use: [
|
|
52
|
+
// Creates `style` nodes from JS strings
|
|
53
|
+
"style-loader",
|
|
54
|
+
// Translates CSS into CommonJS
|
|
55
|
+
"css-loader",
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
output: {
|
|
61
|
+
path: __dirname + "/preview",
|
|
62
|
+
filename: "bundle.js",
|
|
63
|
+
publicPath: "/",
|
|
64
|
+
},
|
|
65
|
+
devServer: {
|
|
66
|
+
historyApiFallback: true,
|
|
67
|
+
},
|
|
68
|
+
plugins: [
|
|
69
|
+
new HtmlWebPackPlugin({
|
|
70
|
+
template: "./example/index.html",
|
|
71
|
+
filename: "./index.html",
|
|
72
|
+
}),
|
|
73
|
+
],
|
|
74
|
+
};
|