File cleanup and sourcing external fonts
This commit is contained in:
rektdeckard
@@ -24,6 +24,8 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
322
src/lib/icons.ts
322
src/lib/icons.ts
@@ -318,325 +318,3 @@ export const icons: Readonly<IconEntry[]> = [
|
|||||||
Icon: Icon.WifiMedium,
|
Icon: Icon.WifiMedium,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// export const iconList: Icon[] = [
|
|
||||||
// {
|
|
||||||
// name: "6-square",
|
|
||||||
// categories: [IconCategory.DESIGN],
|
|
||||||
// tags: ["number", "digit", "six", "box"],
|
|
||||||
// Icon: require("../Icons/6-square.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "6-square-sharp",
|
|
||||||
// categories: [IconCategory.DESIGN],
|
|
||||||
// tags: ["number", "digit", "six", "box"],
|
|
||||||
// Icon: require("../Icons/6-square-sharp.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "8-circle",
|
|
||||||
// categories: [IconCategory.DESIGN],
|
|
||||||
// tags: ["number", "digit", "eight", "round"],
|
|
||||||
// Icon: require("../Icons/8-circle.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "arrow-right-circle",
|
|
||||||
// categories: [IconCategory.DESIGN],
|
|
||||||
// tags: ["pointer", "direction", "round"],
|
|
||||||
// Icon: require("../Icons/arrow-right-circle.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "basketball",
|
|
||||||
// categories: [IconCategory.BRAND, IconCategory.HEALTH, IconCategory.OTHER],
|
|
||||||
// tags: ["sports", "games", "athletics", "dribbble"],
|
|
||||||
// Icon: require("../Icons/basketball.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "battery-half",
|
|
||||||
// categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
|
|
||||||
// tags: ["charged", "charger", "charging", "power"],
|
|
||||||
// Icon: require("../Icons/battery-half.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "battery-half-hash",
|
|
||||||
// categories: [IconCategory.DEVICE, IconCategory.SYSTEM],
|
|
||||||
// tags: ["charged", "charger", "charging", "power"],
|
|
||||||
// Icon: require("../Icons/battery-half-hash.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "book-open",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.OTHER],
|
|
||||||
// tags: ["reading", "reader", "novel", "story"],
|
|
||||||
// Icon: require("../Icons/book-open.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "calendar-6",
|
|
||||||
// categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
|
|
||||||
// tags: ["dates", "times", "events", "schedule", "six"],
|
|
||||||
// Icon: require("../Icons/calendar-6.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "check-circle",
|
|
||||||
// categories: [IconCategory.BUSINESS, IconCategory.SYSTEM],
|
|
||||||
// tags: ["todo", "to-do", "list", "checkbox", "round"],
|
|
||||||
// Icon: require("../Icons/check-circle.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "clock",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["times", "timer", "alarm", "schedule", "events", "watch"],
|
|
||||||
// Icon: require("../Icons/clock.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "cloud",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.BUSINESS,
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// IconCategory.WEATHER,
|
|
||||||
// ],
|
|
||||||
// tags: ["serverless", "backup", "storage"],
|
|
||||||
// Icon: require("../Icons/cloud.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "cube",
|
|
||||||
// categories: [IconCategory.DESIGN, IconCategory.OTHER],
|
|
||||||
// tags: ["square", "box", "3d", "volume", "blocks"],
|
|
||||||
// Icon: require("../Icons/cube.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "delete",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["keyboard", "remove", "backspace"],
|
|
||||||
// Icon: require("../Icons/delete.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "doc",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
|
|
||||||
// tags: ["documents", "files", "save"],
|
|
||||||
// Icon: require("../Icons/doc.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "doc-text",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
|
|
||||||
// tags: ["documents", "files", "save", "write"],
|
|
||||||
// Icon: require("../Icons/doc-text.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "doc-x",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.EDITOR],
|
|
||||||
// tags: ["documents", "files", "cancel", "discard", "close"],
|
|
||||||
// Icon: require("../Icons/doc-x.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "do-not-disturb",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// IconCategory.USERS,
|
|
||||||
// IconCategory.WEATHER,
|
|
||||||
// IconCategory.OTHER,
|
|
||||||
// ],
|
|
||||||
// tags: ["forbidden", "disallowed", "blocked", "spam"],
|
|
||||||
// Icon: require("../Icons/do-not-disturb.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "droid",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.BRAND,
|
|
||||||
// IconCategory.COMMUNICATION,
|
|
||||||
// IconCategory.DEVELOPMENT,
|
|
||||||
// IconCategory.DEVICE,
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// ],
|
|
||||||
// tags: ["android", "google", "mobile", "phone", "cellular", "cellphone"],
|
|
||||||
// Icon: require("../Icons/droid.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "folder",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.DOCUMENT,
|
|
||||||
// IconCategory.EDITOR,
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// ],
|
|
||||||
// tags: ["directory", "directories", "files"],
|
|
||||||
// Icon: require("../Icons/folder.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "folder-dip",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.DOCUMENT,
|
|
||||||
// IconCategory.EDITOR,
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// ],
|
|
||||||
// tags: ["directory", "directories", "files"],
|
|
||||||
// Icon: require("../Icons/folder-dip.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "heart",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.COMMUNICATION,
|
|
||||||
// IconCategory.DESIGN,
|
|
||||||
// IconCategory.HEALTH,
|
|
||||||
// IconCategory.OTHER,
|
|
||||||
// ],
|
|
||||||
// tags: ["wellness", "love", "healthy", "like"],
|
|
||||||
// Icon: require("../Icons/heart.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "horse",
|
|
||||||
// categories: [IconCategory.HEALTH, IconCategory.OTHER],
|
|
||||||
// tags: ["animals", "equestrian", "chess", "knight", "games", "sports"],
|
|
||||||
// Icon: require("../Icons/horse.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "intersect",
|
|
||||||
// categories: [IconCategory.DESIGN],
|
|
||||||
// tags: ["merge", "join", "intersection", "layers"],
|
|
||||||
// Icon: require("../Icons/intersect.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "mail",
|
|
||||||
// categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
|
|
||||||
// tags: ["email", "messages", "messaging", "send", "sent"],
|
|
||||||
// Icon: require("../Icons/mail.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "medium",
|
|
||||||
// categories: [IconCategory.BRAND],
|
|
||||||
// tags: ["publish", "writing", "write"],
|
|
||||||
// Icon: require("../Icons/medium.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "meh",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.COMMUNICATION,
|
|
||||||
// IconCategory.DESIGN,
|
|
||||||
// IconCategory.OTHER,
|
|
||||||
// ],
|
|
||||||
// tags: ["face", "smiley", "emoji", "unimpressed"],
|
|
||||||
// Icon: require("../Icons/meh.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "mic",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.COMMUNICATION,
|
|
||||||
// IconCategory.DEVICE,
|
|
||||||
// IconCategory.MEDIA,
|
|
||||||
// IconCategory.SYSTEM,
|
|
||||||
// ],
|
|
||||||
// tags: ["microphone", "audio", "recording", "music", "sound", "podcast"],
|
|
||||||
// Icon: require("../Icons/mic.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "music-beam-angled",
|
|
||||||
// categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
|
|
||||||
// tags: ["songs", "audio", "playlist", "albums"],
|
|
||||||
// Icon: require("../Icons/music-beam-angled.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "music-beam-straight",
|
|
||||||
// categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
|
|
||||||
// tags: ["songs", "audio", "playlist", "albums"],
|
|
||||||
// Icon: require("../Icons/music-beam-straight.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "pencil-line",
|
|
||||||
// categories: [IconCategory.DESIGN, IconCategory.EDITOR],
|
|
||||||
// tags: ["write", "writing", "editing", "sign", "signature"],
|
|
||||||
// Icon: require("../Icons/pencil-line.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "pen-nib",
|
|
||||||
// categories: [IconCategory.DESIGN, IconCategory.EDITOR],
|
|
||||||
// tags: [
|
|
||||||
// "write",
|
|
||||||
// "writing",
|
|
||||||
// "editing",
|
|
||||||
// "sign",
|
|
||||||
// "signature",
|
|
||||||
// "fountain pen",
|
|
||||||
// "illustrator",
|
|
||||||
// ],
|
|
||||||
// Icon: require("../Icons/pen-nib.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "profile-round",
|
|
||||||
// categories: [IconCategory.USERS],
|
|
||||||
// tags: ["person", "users", "account", "login", "circle"],
|
|
||||||
// Icon: require("../Icons/profile-round.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "rewind",
|
|
||||||
// categories: [IconCategory.MEDIA, IconCategory.SYSTEM],
|
|
||||||
// tags: ["backwards", "reverse", "audio", "recording", "music", "sound"],
|
|
||||||
// Icon: require("../Icons/rewind.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "send",
|
|
||||||
// categories: [IconCategory.BUSINESS, IconCategory.COMMUNICATION],
|
|
||||||
// tags: ["mail", "email", "messages", "up", "arrow", "pointer", "direction"],
|
|
||||||
// Icon: require("../Icons/chevron.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "star",
|
|
||||||
// categories: [
|
|
||||||
// IconCategory.COMMUNICATION,
|
|
||||||
// IconCategory.MAP,
|
|
||||||
// IconCategory.OTHER,
|
|
||||||
// ],
|
|
||||||
// tags: ["rate", "ratings", "favorites"],
|
|
||||||
// Icon: require("../Icons/star.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "table",
|
|
||||||
// categories: [IconCategory.EDITOR, IconCategory.OTHER],
|
|
||||||
// tags: ["tabular", "spreadsheet", "excel"],
|
|
||||||
// Icon: require("../Icons/table.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "trash",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
|
|
||||||
// tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
|
|
||||||
// Icon: require("../Icons/trash.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "trash-duo",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
|
|
||||||
// tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
|
|
||||||
// Icon: require("../Icons/trash-duo.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "trash-solid",
|
|
||||||
// categories: [IconCategory.DOCUMENT, IconCategory.SYSTEM],
|
|
||||||
// tags: ["garbage", "delete", "destroy", "recycle", "recycling"],
|
|
||||||
// Icon: require("../Icons/trash-solid.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "volume-off",
|
|
||||||
// categories: [IconCategory.DEVICE, IconCategory.MEDIA, IconCategory.SYSTEM],
|
|
||||||
// tags: ["speakers", "audio", "recording", "music", "sound"],
|
|
||||||
// Icon: require("../Icons/volume-off.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "warning",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["alert", "danger", "dangerous", "caution"],
|
|
||||||
// Icon: require("../Icons/warning.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "wifi-full",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["wireless", "internet", "network", "connection", "connectivity"],
|
|
||||||
// Icon: require("../Icons/wifi-full.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "wifi-low",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["wireless", "internet", "network", "connection", "connectivity"],
|
|
||||||
// Icon: require("../Icons/wifi-low.svg"),
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "wifi-none",
|
|
||||||
// categories: [IconCategory.SYSTEM],
|
|
||||||
// tags: ["wireless", "internet", "network", "connection", "connectivity"],
|
|
||||||
// Icon: require("../Icons/wifi-none.svg"),
|
|
||||||
// },
|
|
||||||
// ];
|
|
||||||
|
|||||||
@@ -1,13 +1,6 @@
|
|||||||
import { atom } from "recoil";
|
import { atom } from "recoil";
|
||||||
import { IconStyle } from "../lib";
|
import { IconStyle } from "../lib";
|
||||||
|
|
||||||
/**
|
|
||||||
* ATOM
|
|
||||||
* An atom represents a piece of state. Atoms can be read from and written to from any component.
|
|
||||||
* Components that read the value of an atom are implicitly subscribed to that atom, so any atom
|
|
||||||
* updates will result in a re-render of all components subscribed to that atom:
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const searchQueryAtom = atom<string>({
|
export const searchQueryAtom = atom<string>({
|
||||||
key: "searchQueryAtom",
|
key: "searchQueryAtom",
|
||||||
default: "",
|
default: "",
|
||||||
|
|||||||
@@ -4,13 +4,6 @@ import { searchQueryAtom, styleQueryAtom } from "./atoms";
|
|||||||
import { IconEntry, IconCategory } from "../lib";
|
import { IconEntry, IconCategory } from "../lib";
|
||||||
import { icons } from "../lib/icons";
|
import { icons } from "../lib/icons";
|
||||||
|
|
||||||
/**
|
|
||||||
* SELECTOR
|
|
||||||
* A selector represents a piece of derived state. Derived state is a transformation of state.
|
|
||||||
* You can think of derived state as the output of passing state to a pure function that
|
|
||||||
* modifies the given state in some way:
|
|
||||||
*/
|
|
||||||
|
|
||||||
const isQueryMatch = (icon: IconEntry, query: string): boolean => {
|
const isQueryMatch = (icon: IconEntry, query: string): boolean => {
|
||||||
return (
|
return (
|
||||||
icon.name.includes(query) ||
|
icon.name.includes(query) ||
|
||||||
@@ -39,15 +32,19 @@ export const categorizedQueryResultsSelector = selector<
|
|||||||
Readonly<CategorizedIcons>
|
Readonly<CategorizedIcons>
|
||||||
>({
|
>({
|
||||||
key: "categorizedQueryResultsSelector",
|
key: "categorizedQueryResultsSelector",
|
||||||
get: ({ get }) => {
|
get: async ({ get }) => {
|
||||||
const filteredResults = get(filteredQueryResultsSelector);
|
const filteredResults = get(filteredQueryResultsSelector);
|
||||||
return filteredResults.reduce<CategorizedIcons>((acc, curr) => {
|
return await new Promise((resolve) =>
|
||||||
curr.categories.forEach((category) => {
|
resolve(
|
||||||
if (!acc[category]) acc[category] = [];
|
filteredResults.reduce<CategorizedIcons>((acc, curr) => {
|
||||||
acc[category]!!.push(curr);
|
curr.categories.forEach((category) => {
|
||||||
});
|
if (!acc[category]) acc[category] = [];
|
||||||
return acc;
|
acc[category]!!.push(curr);
|
||||||
}, {});
|
});
|
||||||
|
return acc;
|
||||||
|
}, {})
|
||||||
|
)
|
||||||
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -56,8 +53,12 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
|
|||||||
IconCategory
|
IconCategory
|
||||||
>({
|
>({
|
||||||
key: "singleCategoryQueryResultsSelector",
|
key: "singleCategoryQueryResultsSelector",
|
||||||
get: (category: IconCategory) => ({ get }) => {
|
get: (category: IconCategory) => async ({ get }) => {
|
||||||
const filteredResults = get(filteredQueryResultsSelector);
|
const filteredResults = get(filteredQueryResultsSelector);
|
||||||
return filteredResults.filter((icon) => icon.categories.includes(category));
|
return await new Promise((resolve) =>
|
||||||
|
resolve(
|
||||||
|
filteredResults.filter((icon) => icon.categories.includes(category))
|
||||||
|
)
|
||||||
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user