Fixes Issue bufferapp#216: Encourage individual icon component usage …

…by removing Icon/index.js

scripts/generateIconComponents.js

@@ -13,15 +13,15 @@ const fetch = require('node-fetch');
 const { promisify } = require('util');
 const SVGO = require('svgo');
 const svg2jsx = require('@balajmarius/svg2jsx');
-const prettier = require("prettier");
+const prettier = require('prettier');
 
 const writeFileAsync = promisify(fs.writeFile);
 
 const iconCachePath = path.join(__dirname, '../config/cachedIconData.json');
-const pathToIconComponents = path.join(__dirname, '../src/components/Icon');
+const pathToIconComponents = path.join(__dirname, '../src/components/Icons');
 const pathToIconExamples = path.join(
   __dirname,
-  '../src/documentation/examples/Icon'
+  '../src/documentation/examples/Icons'
 );
 
 const figmaIconFileId = 'D9T6BuWxbTVKhlDU8faZSQ9G';
@@ -76,7 +76,7 @@ async function getFigmaFile(fileId) {
  */
 function getFramesToChoose(figmaFile) {
   const frames = figmaFile.document.children[0].children;
-  const framesFormatted = frames.map(f => ({
+  const framesFormatted = frames.map((f) => ({
     name: `${f.name} (${f.children.length} children)`,
     value: f.id,
     short: f.name,
@@ -92,15 +92,15 @@ function getFramesToChoose(figmaFile) {
  */
 function getIconsFromFrame(figmaFile, frameId) {
   const frame = figmaFile.document.children[0].children.find(
-    f => f.id === frameId
+    (f) => f.id === frameId
   );
   if (frame) {
     return (
       frame.children
         // Filter out any ignored icons
-        .filter(icon => !iconsToIgnore.includes(icon.name))
+        .filter((icon) => !iconsToIgnore.includes(icon.name))
         // Simplify the data structure, just grab what we need
-        .map(icon => ({
+        .map((icon) => ({
           id: icon.id,
           name: icon.name,
         }))
@@ -132,14 +132,14 @@ function downloadSvgs(icons) {
     eachLimit(
       icons,
       8, // max parallel downloads
-      async icon => {
+      async (icon) => {
         if (icon.svgUrl) {
           const res = await fetch(icon.svgUrl);
           const svgBody = await res.text();
           newIcons[icon.id].svgBody = svgBody;
         }
       },
-      err => {
+      (err) => {
         if (err) {
           reject(err);
         }
@@ -169,7 +169,7 @@ ${componentName}Icon.displayName = '${componentName}Icon';
 export default ${componentName}Icon;
 `;
 
-const getExampleSource = componentName => `
+const getExampleSource = (componentName) => `
 import React from 'react';
 import ${componentName}Icon from '@bufferapp/ui/Icon/Icons/${componentName}';
 
@@ -187,12 +187,12 @@ export default function ${componentName}IconExample() {
  *
  * @param {String} figmaObjectName
  */
-const getComponentName = figmaObjectName => {
+const getComponentName = (figmaObjectName) => {
   const formatted = figmaObjectName
     .replace(/ico(n)?-/, '')
-    .replace(/( \w)/g, m => m[1].toUpperCase())
+    .replace(/( \w)/g, (m) => m[1].toUpperCase())
     .replace(/ /g, '')
-    .replace(/(-\w)/g, m => m[1].toUpperCase());
+    .replace(/(-\w)/g, (m) => m[1].toUpperCase());
   // Capitalize first char
   return formatted.charAt(0).toUpperCase() + formatted.slice(1);
 };
@@ -204,7 +204,7 @@ const getComponentName = figmaObjectName => {
  * @param {String} source
  * @returns {String} svg
  */
-const getSVGContent = source =>
+const getSVGContent = (source) =>
   source
     // grab everything after the first tag ends (assumed to be <svg ...>)
     .slice(source.indexOf('>') + 1)
@@ -220,16 +220,19 @@ const getSVGContent = source =>
  * @param {Object} icons
  */
 function generateReactIconComponents(icons, spinner) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const iconsCreated = [];
     eachLimit(
       Object.values(icons),
       10,
-      async icon => {
+      async (icon) => {
         const componentName = getComponentName(icon.name);
         const svg = getSVGContent(icon.svgBodyOptimized);
         const reactSource = getReactSource({ componentName, svg });
-        const prettyReactSource = prettier.format(reactSource, { parser: 'babel', singleQuote: true });
+        const prettyReactSource = prettier.format(reactSource, {
+          parser: 'babel',
+          singleQuote: true,
+        });
         const exampleSource = getExampleSource(componentName);
 
         const componentFilePath = path.join(
@@ -242,15 +245,14 @@ function generateReactIconComponents(icons, spinner) {
           `${componentName}.jsx`
         );
 
-
         await writeFileAsync(componentFilePath, prettyReactSource);
         await writeFileAsync(exampleFilePath, exampleSource);
 
         spinner.info(chalk.gray(`Created ${componentFilePath}`));
 
         iconsCreated.push(componentName);
       },
-      err => {
+      (err) => {
         if (err) {
           console.error('Error writing component file!', err);
         }
@@ -288,11 +290,11 @@ function optimizeSvgs(icons) {
     plugins: [{ removeAttrs: { attrs: '(stroke|fill)' } }],
   });
   const newIcons = Object.assign({}, icons);
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     eachLimit(
       Object.values(icons),
       10,
-      async icon => {
+      async (icon) => {
         const removedClipPath = removeClipPath(icon.svgBody);
         let result;
         try {
@@ -309,7 +311,7 @@ function optimizeSvgs(icons) {
         const transformed = await svg2jsx(result.data);
         newIcons[icon.id].svgBodyOptimized = transformed;
       },
-      err => {
+      (err) => {
         if (err) {
           console.error('Error optimizing SVG! ', err);
         }
@@ -322,7 +324,7 @@ function optimizeSvgs(icons) {
 function generateReactIconIndex(icons) {
   const sortedIcons = [...icons].sort();
   const indexContent = sortedIcons
-    .map(name => `export ${name} from './Icons/${name}';`)
+    .map((name) => `export ${name} from './Icons/${name}';`)
     .join('\n');
   const pathToIndex = path.join(pathToIconComponents, 'index.js');
   fs.writeFileSync(pathToIndex, `${indexContent}\n`);

src/components/Avatar/Avatar.jsx

@@ -16,17 +16,16 @@ import {
   yellow,
   startpage,
 } from '../style/colors';
-import {
-  Facebook,
-  Gbp,
-  Instagram,
-  LinkedIn,
-  Pinterest,
-  Shopify,
-  Tiktok,
-  Twitter,
-  StartPage
-} from '../Icon';
+
+import Facebook from "../Icons/Facebook"
+import Gbp from "../Icons/Gbp"
+import Instagram from "../Icons/Instagram"
+import LinkedIn from "../Icons/LinkedIn"
+import Pinterest from "../Icons/Pinterest"
+import Shopify from "../Icons/Shopify"
+import Tiktok from "../Icons/Tiktok"
+import Twitter from "../Icons/Twitter"
+import StartPage from "../Icons/StartPage"
 
 const Wrapper = styled.div`
   ${props => Styles.wrapper[props.size]}

src/components/Banner/Banner.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
 import Text from '../Text';
-import CrossIcon from '../Icon/Icons/Cross';
+import CrossIcon from '../Icons/Cross';
 
 import {
   BannerStyled,

src/components/Button/Button.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import * as Styles from './style';
-import ChevronDown from '../Icon/Icons/ChevronDown';
+import ChevronDown from '../Icons/ChevronDown';
 import Select from '../Select/Select';
 
 /*

src/components/Carousel/Carousel.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import Button from '../Button/index';
-import ArrowRight from '../Icon/Icons/ArrowRight';
-import ArrowLeft from '../Icon/Icons/ArrowLeft';
+import ArrowRight from '../Icons/ArrowRight';
+import ArrowLeft from '../Icons/ArrowLeft';
 import CarouselItems from './CarouselItems';
 import { gray, white } from '../style/colors';
 import { easeOutQuart } from '../style/animations';

src/components/DropdownMenu/ButtonItem/ButtonItem.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonItemStyled, ButtonLabel } from '../style';
-import { Checkmark as CheckmarkIcon } from '../../Icon';
+// import Checkmark from "../../Icons/Checkmark";
+import CheckmarkIcon from "../../Icons/Checkmark";
 import { green } from '../../style/colors';
 import { keyCode } from '../keyCode';