[chore] Upgrade to react-icons v3

sanity-io · Sep 26, 2020 · 2b7a125 · 2b7a125 · vercel · Sep 26, 2020
1 parent db03606
commit 2b7a125
Show file tree

Hide file tree

Showing 40 changed files with 80 additions and 63 deletions.
diff --git a/packages/@sanity/cli/src/actions/init-project/templates/moviedb.js b/packages/@sanity/cli/src/actions/init-project/templates/moviedb.js
@@ -3,7 +3,7 @@ export const datasetUrl = 'https://public.sanity.io/moviesdb-2018-03-06.tar.gz'
 
 export const dependencies = {
   '@sanity/google-maps-input': '^0.99.0',
-  'react-icons': '^2.2.5'
+  'react-icons': '^3.11.0'
 }
 
 export const generateSanityManifest = base => ({

diff --git a/packages/@sanity/cli/templates/moviedb/schemas/movie.js b/packages/@sanity/cli/templates/moviedb/schemas/movie.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/local-movies'
+import {MdLocalMovies as icon} from 'react-icons/md'
 
 export default {
   name: 'movie',

diff --git a/packages/@sanity/cli/templates/moviedb/schemas/screening.js b/packages/@sanity/cli/templates/moviedb/schemas/screening.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/local-play'
+import {MdLocalPlay as icon} from 'react-icons/md'
 
 export default {
   name: 'screening',

diff --git a/packages/example-studio/components/VideoEmbedPreview/VideoEmbedPreview.js b/packages/example-studio/components/VideoEmbedPreview/VideoEmbedPreview.js
@@ -2,9 +2,7 @@
 import React from 'react'
 import humanizeList from 'humanize-list'
 import PropTypes from 'prop-types'
-import FaFilm from 'react-icons/lib/fa/film'
-import FaYouTube from 'react-icons/lib/fa/youtube'
-import FaVimeo from 'react-icons/lib/fa/vimeo'
+import {FaFilm, FaYoutube, FaVimeo} from 'react-icons/fa'
 import styles from './VideoEmbedPreview.css'
 
 export const SUPPORTED_SERVICES = [
@@ -14,7 +12,7 @@ export const SUPPORTED_SERVICES = [
     id: 'youtube',
     title: 'YouTube',
     url: id => `https://www.youtube.com/embed/${id}?rel=0`,
-    icon: FaYouTube
+    icon: FaYoutube
   },
   {
     id: 'vimeo',

diff --git a/packages/example-studio/package.json b/packages/example-studio/package.json
@@ -40,7 +40,7 @@
     "prop-types": "^15.6.0",
     "react": "16.9.0",
     "react-dom": "^16.9.0",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.11.0",
     "react-tooltip": "^3.5.0"
   },
   "devDependencies": {

diff --git a/packages/example-studio/schemas/author.js b/packages/example-studio/schemas/author.js
@@ -1,5 +1,5 @@
+import {MdPerson as icon} from 'react-icons/md'
 import AuthorPreview from '../parts/AuthorPreview'
-import icon from 'react-icons/lib/md/person'
 
 export default {
   name: 'author',

diff --git a/packages/example-studio/schemas/blogpost.js b/packages/example-studio/schemas/blogpost.js
@@ -1,5 +1,5 @@
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
-import BookIcon from 'react-icons/lib/fa/book'
+import {FaBook as BookIcon} from 'react-icons/fa'
 
 const pickFirst = (obj, keys) => {
   if (!obj || typeof obj !== 'object') {

diff --git a/packages/example-studio/schemas/customBlockEditor.js b/packages/example-studio/schemas/customBlockEditor.js
@@ -1,6 +1,5 @@
 import React from 'react'
-import icon from 'react-icons/lib/fa/font'
-import AuthorIcon from 'react-icons/lib/fa/user'
+import {FaFont as icon, FaUser as AuthorIcon} from 'react-icons/fa'
 import Highlight from '../parts/blockEditor/Highlight'
 import AuthorAnnotation from '../parts/blockEditor/AuthorAnnotation'
 import TitleStyle from '../parts/blockEditor/TitleStyle'
@@ -52,7 +51,10 @@ export default {
         {
           title: 'Block',
           type: 'block',
-          lists: [{type: 'Bullet', value: 'bullet'}, {type: 'Number', value: 'number'}],
+          lists: [
+            {type: 'Bullet', value: 'bullet'},
+            {type: 'Number', value: 'number'}
+          ],
           marks: {
             decorators: [
               {title: 'Strong', value: 'strong'},

diff --git a/packages/example-studio/schemas/customObject.js b/packages/example-studio/schemas/customObject.js
@@ -1,5 +1,5 @@
+import {MdExtension as icon} from 'react-icons/md'
 import CustomObjectInput from '../components/CustomObjectInput'
-import icon from 'react-icons/lib/md/extension'
 
 export default {
   type: 'document',
@@ -17,7 +17,10 @@ export default {
       name: 'metadata',
       type: 'object',
       title: 'Some metadata',
-      fields: [{name: 'name', type: 'string'}, {name: 'title', type: 'string'}]
+      fields: [
+        {name: 'name', type: 'string'},
+        {name: 'title', type: 'string'}
+      ]
     },
     {
       name: 'image',

diff --git a/packages/example-studio/schemas/proteinTest.js b/packages/example-studio/schemas/proteinTest.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/go/microscope'
+import {GoMicroscope as icon} from 'react-icons/go'
 
 export default {
   name: 'proteinTest',

diff --git a/packages/example-studio/schemas/richText.js b/packages/example-studio/schemas/richText.js
@@ -1,13 +1,19 @@
 import React from 'react'
-import icon from 'react-icons/lib/fa/font'
-import AuthorIcon from 'react-icons/lib/fa/user'
+import {FaFont as icon, FaUser as AuthorIcon} from 'react-icons/fa'
 import Highlight from '../parts/blockEditor/Highlight'
 import AuthorAnnotation from '../parts/blockEditor/AuthorAnnotation'
 import TitleStyle from '../parts/blockEditor/TitleStyle'
 
 const markerIcon = () => {
   return (
-    <svg x="0" y="0" width="1em" height="1em" viewBox="0 0 414.065 414.064" style={{verticalAlign: 'middle'}}>
+    <svg
+      x="0"
+      y="0"
+      width="1em"
+      height="1em"
+      viewBox="0 0 414.065 414.064"
+      style={{verticalAlign: 'middle'}}
+    >
       <path
         d="M251.948,286.342c4.427,2.147,10.875,2.523,13.3-3.205c25.512-60.286,87.315-209.611,87.315-209.611
         c1.754-4.497-0.375-9.884-4.729-11.969L221.203,0.888c-4.354-2.085-9.886-0.368-12.291,3.815
@@ -45,7 +51,10 @@ export default {
         {
           title: 'Block',
           type: 'block',
-          lists: [{type: 'Bullet', value: 'bullet'}, {type: 'Number', value: 'number'}],
+          lists: [
+            {type: 'Bullet', value: 'bullet'},
+            {type: 'Number', value: 'number'}
+          ],
           marks: {
             decorators: [
               {title: 'Strong', value: 'strong'},

diff --git a/packages/example-studio/schemas/schema.js b/packages/example-studio/schemas/schema.js
@@ -2,14 +2,14 @@ import createSchema from 'part:@sanity/base/schema-creator'
 import schemaTypes from 'all:part:@sanity/base/schema-type'
 import code from 'part:@sanity/form-builder/input/code/schema'
 
+import protein from '../components/ProteinInput/schema'
 import author from './author'
 import blogpost from './blogpost'
 import videoEmbed from './videoEmbed'
 import localeString from './localeString'
 import localeSlug from './localeSlug'
 import proteinTest from './proteinTest'
 import customObject from './customObject'
-import protein from '../components/ProteinInput/schema'
 import localeBlockContent from './localeBlockContent'
 import {blockContent} from './blockContent'
 import customBlockEditor from './customBlockEditor'

diff --git a/packages/example-studio/schemas/videoEmbed.js b/packages/example-studio/schemas/videoEmbed.js
@@ -1,6 +1,6 @@
+import {FaVideoCamera as icon} from 'react-icons/fa'
 import VideoEmbedPreview from '../components/VideoEmbedPreview/VideoEmbedPreview'
 import VideoEmbedInput from '../components/VideoEmbedInput'
-import icon from 'react-icons/lib/fa/video-camera'
 
 export default {
   type: 'object',

diff --git a/packages/movies-studio/package.json b/packages/movies-studio/package.json
@@ -31,7 +31,7 @@
     "@sanity/vision": "1.150.6",
     "react": "16.9.0",
     "react-dom": "^16.9.0",
-    "react-icons": "^2.2.7"
+    "react-icons": "^3.11.0"
   },
   "bugs": {
     "url": "https://github.com/sanity-io/sanity/issues"

diff --git a/packages/test-studio/package.json b/packages/test-studio/package.json
@@ -47,7 +47,7 @@
     "prop-types": "^15.6.0",
     "react": "16.9.0",
     "react-dom": "^16.9.0",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.11.0",
     "react-json-pretty": "^2.2.0",
     "react-visibility-sensor": "^5.1.1",
     "sanity-plugin-dashboard-widget-cats": "0.0.2",

diff --git a/packages/test-studio/schemas/arrays.js b/packages/test-studio/schemas/arrays.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import icon from 'react-icons/lib/md/format-list-numbered'
+import {MdFormatListNumbered as icon} from 'react-icons/md'
 
 export const topLevelArrayType = {
   name: 'topLevelArrayType',

diff --git a/packages/test-studio/schemas/blocks.js b/packages/test-studio/schemas/blocks.js
@@ -1,7 +1,9 @@
 import React from 'react'
-import icon from 'react-icons/lib/md/rate-review'
-import imageIcon from 'react-icons/lib/md/photo-library'
-import colorIcon from 'react-icons/lib/md/format-color-fill'
+import {
+  MdRateReview as icon,
+  MdPhotoLibrary as imageIcon,
+  MdFormatColorFill as colorIcon
+} from 'react-icons/md'
 import {BlockEditor} from 'part:@sanity/form-builder'
 
 const CustomEditor = React.forwardRef((props, ref) => {

diff --git a/packages/test-studio/schemas/book.js b/packages/test-studio/schemas/book.js
@@ -1,4 +1,4 @@
-import BookIcon from 'react-icons/lib/fa/book'
+import {FaBook as BookIcon} from 'react-icons/fa'
 
 function formatSubtitle(book) {
   return [

diff --git a/packages/test-studio/schemas/booleans.js b/packages/test-studio/schemas/booleans.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/check-box'
+import {MdCheckBox as icon} from 'react-icons/md'
 
 export default {
   name: 'booleansTest',

diff --git a/packages/test-studio/schemas/code.js b/packages/test-studio/schemas/code.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/code'
+import {MdCode as icon} from 'react-icons/md'
 
 export default {
   name: 'codeTest',

diff --git a/packages/test-studio/schemas/color.js b/packages/test-studio/schemas/color.js
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react'
-import icon from 'react-icons/lib/md/format-color-fill'
+import {MdFormatColorFill as icon} from 'react-icons/md'
 
 export default {
   name: 'colorTest',

diff --git a/packages/test-studio/schemas/customInputs.js b/packages/test-studio/schemas/customInputs.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/extension'
+import {MdExtension as icon} from 'react-icons/md'
 import CustomStringInput from '../src/components/CustomStringInput'
 import CustomMyObjectInput from '../src/components/CustomMyObjectInput'
 import CustomFontStringInput from '../src/components/CustomFontStringInput'

diff --git a/packages/test-studio/schemas/emails.js b/packages/test-studio/schemas/emails.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/email'
+import {MdEmail as icon} from 'react-icons/md'
 
 export default {
   name: 'emailsTest',

diff --git a/packages/test-studio/schemas/fieldsets.js b/packages/test-studio/schemas/fieldsets.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/fa/tasks'
+import {FaTasks as icon} from 'react-icons/fa'
 
 export default {
   name: 'fieldsetsTest',

diff --git a/packages/test-studio/schemas/focus.js b/packages/test-studio/schemas/focus.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/center-focus-weak'
+import {MdCenterFocusWeak as icon} from 'react-icons/md'
 
 export default {
   name: 'focusTest',
@@ -23,7 +23,10 @@ export default {
       of: [
         {
           type: 'object',
-          fields: [{name: 'first', type: 'string'}, {name: 'focusTest', type: 'focusTest'}]
+          fields: [
+            {name: 'first', type: 'string'},
+            {name: 'focusTest', type: 'focusTest'}
+          ]
         }
       ]
     },

diff --git a/packages/test-studio/schemas/geopoint.js b/packages/test-studio/schemas/geopoint.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import icon from 'react-icons/lib/md/pin-drop'
+import {MdPinDrop as icon} from 'react-icons/md'
 import config from 'config:@sanity/google-maps-input'
 
 export default {
@@ -49,9 +49,7 @@ export default {
           }
           return (
             <img
-              src={`https://maps.googleapis.com/maps/api/staticmap?zoom=11&center=${location.lat},${
-                location.lng
-              }&size=${dimensions.width}x${dimensions.height}&key=${apiKey}`}
+              src={`https://maps.googleapis.com/maps/api/staticmap?zoom=11&center=${location.lat},${location.lng}&size=${dimensions.width}x${dimensions.height}&key=${apiKey}`}
               alt={title}
             />
           )

diff --git a/packages/test-studio/schemas/liveEdit.js b/packages/test-studio/schemas/liveEdit.js
@@ -1,4 +1,4 @@
-import BookIcon from 'react-icons/lib/fa/book'
+import {FaBook as BookIcon} from 'react-icons/fa'
 
 function formatSubtitle(thesis) {
   if (thesis.authorName && thesis.publicationYear) {

diff --git a/packages/test-studio/schemas/numbers.js b/packages/test-studio/schemas/numbers.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/ti/sort-numerically'
+import {TiSortNumerically as icon} from 'react-icons/ti'
 
 export default {
   name: 'numbersTest',
@@ -45,11 +45,7 @@ export default {
       title: 'Test Number - List objects and numbers',
       type: 'number',
       options: {
-        list: [
-          {value: 1, title: 'One'},
-          {value: 2, title: 'Two'},
-          3
-        ]
+        list: [{value: 1, title: 'One'}, {value: 2, title: 'Two'}, 3]
       }
     },
     {

diff --git a/packages/test-studio/schemas/objects.js b/packages/test-studio/schemas/objects.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/go/puzzle'
+import {GoPuzzle as icon} from 'react-icons/go'
 
 export const myObject = {
   type: 'object',

diff --git a/packages/test-studio/schemas/presence.js b/packages/test-studio/schemas/presence.js
@@ -1,7 +1,7 @@
-import BookIcon from 'react-icons/lib/fa/book'
+import {range} from 'lodash'
+import {FaBook as BookIcon} from 'react-icons/fa'
 import {CustomInputWithDefaultPresence} from '../src/components/CustomInputWithDefaultPresence'
 import {CustomInputWithDialogOverlay} from '../src/components/CustomInputWithDialogOverlay'
-import {range} from 'lodash'
 
 export const objectWithNestedArray = {
   type: 'object',

diff --git a/packages/test-studio/schemas/previewMediaTest.js b/packages/test-studio/schemas/previewMediaTest.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/tv'
+import {MdTv as icon} from 'react-icons/md'
 
 export default {
   name: 'previewMediaTest',

diff --git a/packages/test-studio/schemas/readOnly.js b/packages/test-studio/schemas/readOnly.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/text-format'
+import {MdTextFormat as icon} from 'react-icons/md'
 import React from 'react'
 
 export default {

diff --git a/packages/test-studio/schemas/recursive.js b/packages/test-studio/schemas/recursive.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/ti/infinity-outline'
+import {TiInfinityOutline as icon} from 'react-icons/ti'
 
 export default {
   name: 'recursiveDocument',

diff --git a/packages/test-studio/schemas/recursiveArray.js b/packages/test-studio/schemas/recursiveArray.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/ti/infinity'
+import {TiInfinity as icon} from 'react-icons/ti'
 
 export default {
   name: 'recursiveArraysTest',

diff --git a/packages/test-studio/schemas/recursiveObject.js b/packages/test-studio/schemas/recursiveObject.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/go/puzzle'
+import {GoPuzzle as icon} from 'react-icons/go'
 
 export const recursiveObject = {
   type: 'object',

diff --git a/packages/test-studio/schemas/recursivePopover.js b/packages/test-studio/schemas/recursivePopover.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/ti/infinity'
+import {TiInfinity as icon} from 'react-icons/ti'
 
 export default {
   name: 'recursivePopoverTest',

diff --git a/packages/test-studio/schemas/strings.js b/packages/test-studio/schemas/strings.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/text-format'
+import {MdTextFormat as icon} from 'react-icons/md'
 import {HooksBasedStringInput} from '../src/components/HooksBasedStringInput'
 
 export default {

diff --git a/packages/test-studio/schemas/texts.js b/packages/test-studio/schemas/texts.js
@@ -1,4 +1,4 @@
-import icon from 'react-icons/lib/md/format-align-left'
+import {MdFormatAlignLeft as icon} from 'react-icons/md'
 
 export default {
   name: 'textsTest',