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

Update to phosphor-react@0.2.0

Browse Source
This commit is contained in:
rektdeckard
2020-08-16 16:42:57 -04:00
parent 9e1cff44d8
commit 017a05a769
5 changed files with 929 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -34,7 +34,7 @@
"@types/tinycolor2": "^1.4.2", "@types/tinycolor2": "^1.4.2",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"framer-motion": "^2.1.0", "framer-motion": "^2.1.0",
"phosphor-react": "^0.1.8", "phosphor-react": "^0.2.0",
"react": "^17.0.0-rc.0", "react": "^17.0.0-rc.0",
"react-dom": "^17.0.0-rc.0", "react-dom": "^17.0.0-rc.0",
"react-dropdown-select": "^4.4.2", "react-dropdown-select": "^4.4.2",

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

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpRightCircle } from "phosphor-react"; import { ArrowUpRightCircle, ArrowDownCircle } from "phosphor-react";
import "./Header.css"; import "./Header.css";
import markerPurple from "../../assets/marker-purple.svg"; import markerPurple from "../../assets/marker-purple.svg";
@@ -65,7 +65,7 @@ const Header: React.FC<HeaderProps> = () => {
</button> </button>
<button className="main-button" onClick={handleScrollToIcons}> <button className="main-button" onClick={handleScrollToIcons}>
<ArrowUpRightCircle size={24} weight="fill" /> <ArrowDownCircle size={24} weight="fill" />
Explore icons Explore icons
</button> </button>
</div> </div>

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

@@ -3,7 +3,7 @@ import { useRecoilValue } from "recoil";
import { motion, useAnimation } from "framer-motion"; import { motion, useAnimation } from "framer-motion";
import { useWindowSize } from "react-use"; import { useWindowSize } from "react-use";
import TinyColor from "tinycolor2"; import TinyColor from "tinycolor2";
import { IconContext, WarningTriangle } from "phosphor-react"; import { IconContext, Warning } from "phosphor-react";
import { import {
styleQueryAtom, styleQueryAtom,
@@ -44,7 +44,7 @@ const IconGridAnimated: React.FC<IconGridProps> = () => {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
> >
<WarningTriangle size={92} color="darkmagenta" weight="duotone" /> <Warning size={92} color="currentColor" weight="fill" />
<p>{`No results for '${query}'`}</p> <p>{`No results for '${query}'`}</p>
</motion.div> </motion.div>
); );

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

@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { Search } from "phosphor-react"; import { MagnifyingGlass } from "phosphor-react";
import { searchQueryAtom } from "../../state/atoms"; import { searchQueryAtom } from "../../state/atoms";
import "./SearchInput.css"; import "./SearchInput.css";
@@ -15,7 +15,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
}; };
return ( return (
<div className="search-bar"> <div className="search-bar">
<Search size={24} /> <MagnifyingGlass size={24} />
<input <input
id="search-input" id="search-input"
aria-label="Search for an icon" aria-label="Search for an icon"

1023
src/lib/icons.ts
View File

File diff suppressed because it is too large Load Diff