andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

File cleanup and sourcing external fonts

Browse Source
This commit is contained in:
rektdeckard
2020-07-29 12:14:31 -04:00
parent 0ef8f87456
commit f3aa75a0c9
4 changed files with 20 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -24,6 +24,8 @@
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`.
-->
<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>
</head>
<body>

322
src/lib/icons.ts
View File

@@ -318,325 +318,3 @@ export const icons: Readonly<IconEntry[]> = [
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"),
// },
// ];

7
src/state/atoms.ts
View File

@@ -1,13 +1,6 @@
import { atom } from "recoil";
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>({
key: "searchQueryAtom",
default: "",

35
src/state/selectors.ts
View File

@@ -4,13 +4,6 @@ import { searchQueryAtom, styleQueryAtom } from "./atoms";
import { IconEntry, IconCategory } from "../lib";
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 => {
return (
icon.name.includes(query) ||
@@ -39,15 +32,19 @@ export const categorizedQueryResultsSelector = selector<
Readonly<CategorizedIcons>
>({
key: "categorizedQueryResultsSelector",
get: ({ get }) => {
get: async ({ get }) => {
const filteredResults = get(filteredQueryResultsSelector);
return filteredResults.reduce<CategorizedIcons>((acc, curr) => {
curr.categories.forEach((category) => {
if (!acc[category]) acc[category] = [];
acc[category]!!.push(curr);
});
return acc;
}, {});
return await new Promise((resolve) =>
resolve(
filteredResults.reduce<CategorizedIcons>((acc, curr) => {
curr.categories.forEach((category) => {
if (!acc[category]) acc[category] = [];
acc[category]!!.push(curr);
});
return acc;
}, {})
)
);
},
});
@@ -56,8 +53,12 @@ export const singleCategoryQueryResultsSelector = selectorFamily<
IconCategory
>({
key: "singleCategoryQueryResultsSelector",
get: (category: IconCategory) => ({ get }) => {
get: (category: IconCategory) => async ({ get }) => {
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))
)
);
},
});