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

Add sample icons and refactor Icon interface

Browse Source
This commit is contained in:
rektdeckard
2020-07-15 18:06:16 -04:00
parent 50b114ee7a
commit 8888227be1
9 changed files with 1203 additions and 1209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/IconGrid/IconGrid.tsx
View File

@@ -12,9 +12,9 @@ const IconGrid: React.FC<IconGridProps> = () => {
return (
<div className="grid">
{filteredQueryResults.map((icon) => (
<div key={`${icon.name}-${icon.style.type.toString()}`} className="grid-item">
<div key={`ph-${icon.name}-${icon.style}`} className="grid-item">
<img
src="https://i.imgur.com/zaO12Y8m.jpeg"
src={icon.asset}
alt={`${icon.name} icon`}
width="100%"
/>

13
src/components/IconSearch/IconSearch.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { useRecoilState } from "recoil";
import { searchQueryAtom, styleQueryAtom } from "../../state/atoms";
import { IconFillStyle } from "../../lib/Icon";
import { IconStyle } from "../../lib/Icon";
type IconSearchProps = {};
@@ -15,7 +15,7 @@ const IconSearch: React.FC<IconSearchProps> = () => {
};
const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setStyle(event.target.value as IconFillStyle);
setStyle(event.target.value as IconStyle);
};
return (
@@ -23,9 +23,12 @@ const IconSearch: React.FC<IconSearchProps> = () => {
<input value={query} onChange={handleSearchChange} />
<select value={style?.toString()} onChange={handleStyleChange}>
<option value={""}>All</option>
<option value={IconFillStyle.LINE}>Line</option>
<option value={IconFillStyle.FILL}>Fill</option>
<option value={IconFillStyle.DUOTONE}>Duotone</option>
<option value={IconStyle.THIN}>Thin</option>
<option value={IconStyle.LIGHT}>Light</option>
<option value={IconStyle.REGULAR}>Regular</option>
<option value={IconStyle.BOLD}>Bold</option>
<option value={IconStyle.FILL}>Fill</option>
<option value={IconStyle.DUOTONE}>Duotone</option>
</select>
</>
);