deps: update to phosphor-react@1.1.2

By adding 'content-visibility: auto;' we were able to see an 8x
improvement on rendering time and a 25x improvement on paint times for
first load. We may need to do some work to bring similar gains to
non-Chrome useragents.

.vscode/phosphor-home.code-snippets

@@ -1,5 +1,5 @@
 {
-	// Place your phosphor-web workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
+	// Place your phosphor-home workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
 	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
 	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
 	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
@@ -25,6 +25,6 @@
 			"\tIcon: ${4:icon},",
 			"},"
 		],
-		"description": "Create an IconEntry for phosphor-web"
+		"description": "Create an IconEntry for phosphor-home"
 	}
 }

README.md

@@ -4,7 +4,7 @@
 
 Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
 
-- 588 icons and counting
+- 683 icons and counting
 - 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
 - Designed at 16 x 16px to read well small and scale up big
 - Raw stroke information retained to fine-tune the style
@@ -67,9 +67,9 @@ ReactDOM.render(<App />, document.getElementById("root"));
 ```html
 <template>
   <div>
-    <PhHorse />
+    <ph-horse />
-    <PhHeart :size="32" color="hotpink" weight="fill" />
+    <ph-heart :size="32" color="hotpink" weight="fill" />
-    <PhCube />
+    <ph-cube />
   </div>
 </template>
 
@@ -86,7 +86,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
 </script>
 ```
 
-> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions.
+> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
 
 ## Related Projects
 

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "phosphor-web",
+  "name": "phosphor-home",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {
@@ -18,21 +18,20 @@
     "UI",
     "UX"
   ],
-  "repository": "github:phosphor-icons/phosphor-web",
+  "repository": "github:phosphor-icons/phosphor-home",
-  "private": false,
+  "private": true,
   "dependencies": {
     "file-saver": "^2.0.2",
     "framer-motion": "^2.1.0",
     "fuse.js": "^6.4.1",
-    "phosphor-icons": "^1.0.0",
+    "phosphor-react": "^1.1.2",
-    "phosphor-react": "^0.6.0",
+    "react": "^17.0.1",
-    "react": "^17.0.0-rc.0",
+    "react-dom": "^17.0.1",
-    "react-dom": "^17.0.0-rc.0",
     "react-dropdown-select": "^4.4.2",
     "react-ga": "^3.1.2",
     "react-scripts": "3.4.1",
     "react-use": "^15.3.2",
-    "recoil": "^0.0.13",
+    "recoil": "^0.1.2",
     "svg2png-converter": "^1.0.0",
     "tinycolor2": "^1.4.1"
   },

public/.htaccess

@@ -0,0 +1,9 @@
+RewriteEngine On
+RewriteCond %{HTTPS} !=on
+RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
+
+Options +SymLinksIfOwnerMatch 
+RewriteEngine On 
+RewriteCond %{REQUEST_FILENAME} !-f 
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.html [L]

public/index.html

@@ -18,7 +18,21 @@
       itemprop="description"
       content="A flexible icon family for interfaces, diagrams, presentations — whatever, really."
     />
-    <meta itemprop="image" content="https://phosphoricons.com/phosphor-opengraph.png" />
+    <meta
+      itemprop="image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Project",
+        "url": "https://phosphoricons.com",
+        "email": "hello@phosphoricons.com",
+        "location": "Brooklyn, NY",
+        "description": "A flexible icon family for interfaces, diagrams, presentations — whatever, really.",
+        "logo": "https://phosphoricons.com/favicon-512.png"
+      }
+    </script>
 
     <!-- FACEBOOK META -->
     <meta property="og:title" content="Phosphor Icons" />
@@ -29,7 +43,10 @@
     />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://phosphoricons.com" />
-    <meta property="og:image" content="https://phosphoricons.com/phosphor-opengraph.png" />
+    <meta
+      property="og:image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:alt" content="Phosphor Icons logo" />
     <meta property="og:image:width" content="1200" />
@@ -42,7 +59,10 @@
       name="twitter:description"
       content="A flexible icon family for interfaces, diagrams, presentations — whatever, really."
     />
-    <meta name="twitter:image" content="https://phosphoricons.com/phosphor-opengraph.png" />
+    <meta
+      name="twitter:image"
+      content="https://phosphoricons.com/phosphor-opengraph.png"
+    />
     <meta name="twitter:site" content="@_phosphoricons" />
     <meta name="twitter:creator" content="@friedtm" />
 

src/components/Footer/Footer.tsx

@@ -41,7 +41,7 @@ const Footer: React.FC<FooterProps> = () => {
             Phosphor is free and open-source, licensed under{" "}
             <a
               className="main-link"
-              href="https://raw.githubusercontent.com/phosphor-icons/phosphor-web/master/LICENSE"
+              href="https://raw.githubusercontent.com/phosphor-icons/phosphor-home/master/LICENSE"
             >
               MIT
             </a>
@@ -82,7 +82,7 @@ const Footer: React.FC<FooterProps> = () => {
                 Helena Zhang
               </a>{" "}
               and built by{" "}
-              <a className="main-link" href="https://github.com/rektdeckard">
+              <a className="main-link" href="https://tobiasfried.com">
                 Toby Fried
               </a>{" "}
               <span

src/components/Header/Header.tsx

@@ -23,7 +23,7 @@ type HeaderProps = {};
 
 const handleGetStarted = () =>
   window.open(
-    "https://github.com/phosphor-icons/phosphor-web#phosphor-icons",
+    "https://github.com/phosphor-icons/phosphor-home#phosphor-icons",
     "_blank",
     "noopener noreferrer"
   );

src/components/IconGrid/DetailsPanel.tsx

@@ -82,7 +82,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
     react: `<${Icon.displayName} size={${size}} ${
       color !== "#000000" ? `color="${color}" ` : ""
     }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
-    vue: `<Ph${Icon.displayName} :size="${size}" ${
+    vue: `<ph${Icon.displayName!!.replace(
+      /([a-z0-9]|(?=[A-Z]))([A-Z])/g,
+      "$1-$2"
+    ).toLowerCase()} :size="${size}" ${
       color !== "#000000" ? `color="${color}" ` : ""
     }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
   };
@@ -122,7 +125,7 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
     Svg2Png.save(
       ref.current,
       `${name}${weight === "regular" ? "" : `-${weight}`}.png`,
-      { scaleX: 1.334, scaleY: 1.334 }
+      { scaleX: 2.667, scaleY: 2.667 }
     );
   };
 
@@ -230,7 +233,7 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
             ) : (
               <Copy size={32} color="currentColor" weight="fill" />
             )}
-            {copied === "svg" ? "Copied!" : "Copy to design software"}
+            {copied === "svg" ? "Copied!" : "Copy SVG"}
           </button>
         </div>
       </motion.div>

src/components/IconGrid/IconGrid.css

@@ -1,6 +1,7 @@
 .grid-container {
   padding: 32px 16px;
   min-height: 80vh;
+  content-visibility: auto;
 }
 
 .grid {

src/components/IconGrid/IconGrid.tsx

@@ -14,7 +14,7 @@ import TagCloud from "./TagCloud";
 import Notice from "../Notice/Notice";
 import "./IconGrid.css";
 
-const defaultSearchTags = ["communication", "editor", "emoji", "maps", "weather"];
+const defaultSearchTags = ["*new*", "communication", "editor", "emoji", "maps", "weather"];
 
 type IconGridProps = {};
 

src/components/Links/Links.tsx

@@ -24,6 +24,26 @@ const Links: React.FC<LinksProps> = () => {
         </OutboundLink>
       </div>
        <div>
+        <ArrowElbowDownRight size={24} />
+        <span>
+        <OutboundLink
+          className="nav-link"
+          to="https://www.figma.com/community/file/903830135544202908/Phosphor-Icons"
+          eventLabel="Figma library"
+        >
+          Figma library
+        </OutboundLink>
+        {" / "}
+        <OutboundLink
+          className="nav-link"
+          to="https://www.figma.com/community/plugin/898620911119764089/Phosphor-Icons"
+          eventLabel="Figma plugin"
+        >
+          plugin
+        </OutboundLink>
+        </span>
+      </div>
+      {/* <div>
         <ArrowElbowDownRight size={24} />
         <OutboundLink
           className="nav-link"
@@ -33,21 +53,21 @@ const Links: React.FC<LinksProps> = () => {
           Figma library
         </OutboundLink>
       </div>
-      {/* <div>
+      <div>
         <ArrowElbowDownRight size={24} />
         <OutboundLink
           className="nav-link"
           to="https://www.figma.com/community/plugin/892854133443228626/Phosphor-Icons"
           eventLabel="Figma plugin"
         >
-          Add Figma plugin
+          Figma plugin
         </OutboundLink>
       </div> */}
       <div>
         <ArrowElbowDownRight size={24} />
         <a
           className="nav-link"
-          href="https://github.com/phosphor-icons/phosphor-web/issues"
+          href="https://github.com/phosphor-icons/phosphor-home/issues"
         >
           Request an icon
         </a>
@@ -80,9 +100,9 @@ const Links: React.FC<LinksProps> = () => {
         <ArrowElbowDownRight size={24} />
         <a
           className="nav-link"
-          href="https://github.com/phosphor-icons/phosphor-web"
+          href="https://github.com/phosphor-icons/phosphor-home"
         >
-          Github
+          GitHub
         </a>
       </div>
     </div>

src/lib/index.ts

@@ -21,7 +21,7 @@ export enum IconCategory {
   FINANCE = "finances",
   GAMES = "games",
   HEALTH = "health & wellness",
-  MAP = "maps & navigation",
+  MAP = "maps & travel",
   MEDIA = "media",
   NATURE = "nature",
   OBJECTS = "objects",