Resolve name collisions between Material Design and token icons

There are three tokens for which there are Material Design icons with the same name: "Block", "Chat", and "Link". This causes at least two problems: - Since the token icons are [declared first](https://github.com/ConsenSysMesh/rimble-icons/blob/26cab57ee08741099804d06da467d93520630cd7/source/index.js#L1) the MD icons don't override them (at least when using ES style imports), and therefore there's no way to import those MD icons - When using CommonJS modules (e.g. in Jest tests), the [attempted redefinition of already-defined exports](https://github.com/ConsenSysMesh/rimble-icons/blob/26cab57ee08741099804d06da467d93520630cd7/lib/index.js#L23) errors with `Cannot redefine property...`, breaking anything that uses Rimble icons anywhere in this way This commit resolves this by renaming the conflicting MD icons by appending "Icon", making them "BlockIcon", etc. Since these MD icons were previously inaccessible, this shouldn't impact any existing users.
ConsenSysMesh · Feb 26, 2021 · 5242186 · 5242186
1 parent 26cab57
commit 5242186
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 63 deletions.
diff --git a/ICONS.md b/ICONS.md
@@ -92,7 +92,7 @@
 - `BatteryUnknown`
 - `BeachAccess`
 - `Beenhere`
-- `Block`
+- `BlockIcon`
 - `Bluetooth`
 - `BluetoothAudio`
 - `BluetoothConnected`
@@ -164,9 +164,9 @@
 - `CenterFocusStrong`
 - `CenterFocusWeak`
 - `ChangeHistory`
-- `Chat`
 - `ChatBubble`
 - `ChatBubbleOutline`
+- `ChatIcon`
 - `Check`
 - `CheckBox`
 - `CheckBoxOutlineBlank`
@@ -477,7 +477,7 @@
 - `LineStyle`
 - `LineWeight`
 - `LinearScale`
-- `Link`
+- `LinkIcon`
 - `LinkedCamera`
 - `List`
 - `LiveHelp`

diff --git a/build.js b/build.js
@@ -97,13 +97,34 @@ const copy = async () => {
   if (!fs.existsSync(outBaseDir)) fs.mkdirSync(outBaseDir);
   if (!fs.existsSync(examplesBaseDir)) fs.mkdirSync(examplesBaseDir);
 
+  // Read crypto icons from local directory
+  const cryptoFiles = await readdir(cryptoPath, [ignore]);
+  // Sort crypto icons
+  const cryptoIcons = uniqBy(cryptoFiles, file => path.basename(file))
+    .map(readFile)
+    .sort((a, b) => (a.name < b.name ? -1 : 1));
+
+  // Create missing crypto directories
+  if (!fs.existsSync(cryptoOutDir)) fs.mkdirSync(cryptoOutDir);
+  if (!fs.existsSync(cryptoExamplesDir)) fs.mkdirSync(cryptoExamplesDir);
+
+  // Copy crypto icons to svg directory
+  cryptoIcons.forEach(writeCryptoFile);
+  // Create crypto examples
+  cryptoIcons.forEach(createCryptoExample);
+  console.log(cryptoIcons.length, " token icons copied");
+
   // Read material icons
   const mdFiles = await readdir(pkgPath, [ignore]);
 
+  // Grab crypto icon names so we can easily resolve name collisions with material icons
+  const cryptoIconNames = cryptoIcons.map(icon => icon.name);
+
   // Sort material icons
   const mdIcons = uniqBy(mdFiles, file => path.basename(file))
     .filter(is24px)
     .map(readFile)
+    .map(icon => cryptoIconNames.includes(icon.name) ? { ...icon, name: `${icon.name}Icon` } : icon)
     .sort((a, b) => (a.name < b.name ? -1 : 1));
 
   // Create missing material directories
@@ -116,23 +137,6 @@ const copy = async () => {
   mdIcons.forEach(createMdExample);
   console.log(mdIcons.length, " material icons copied");
 
-  // Read crypto icons from local directory
-  const cryptoFiles = await readdir(cryptoPath, [ignore]);
-  // Sort crypto icons
-  const cryptoIcons = uniqBy(cryptoFiles, file => path.basename(file))
-    .map(readFile)
-    .sort((a, b) => (a.name < b.name ? -1 : 1));
-
-  // Create missing crypto directories
-  if (!fs.existsSync(cryptoOutDir)) fs.mkdirSync(cryptoOutDir);
-  if (!fs.existsSync(cryptoExamplesDir)) fs.mkdirSync(cryptoExamplesDir);
-
-  // Copy crypto icons to svg directory
-  cryptoIcons.forEach(writeCryptoFile);
-  // Create crypto examples
-  cryptoIcons.forEach(createCryptoExample);
-  console.log(cryptoIcons.length, " token icons copied");
-
   // Combine icon sets
   const combinedIcons = mdIcons.concat(cryptoIcons);
   // Create markdown doc of all icons

diff --git a/es/md/Block.js → es/md/BlockIcon.js b/es/md/Block.js → es/md/BlockIcon.js
@@ -6,7 +6,7 @@ import { space, color } from "styled-system";
 var Svg = styled("svg")({
   flex: "none"
 }, space, color);
-var SvgBlock = React.forwardRef(function (props, ref) {
+var SvgBlockIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -20,9 +20,9 @@ var SvgBlock = React.forwardRef(function (props, ref) {
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 014 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0120 12c0 4.42-3.58 8-8 8z"
   }));
 });
-SvgBlock.displayName = "SvgBlock";
-SvgBlock.defaultProps = {
+SvgBlockIcon.displayName = "SvgBlockIcon";
+SvgBlockIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-export default SvgBlock;
+export default SvgBlockIcon;
diff --git a/es/md/Chat.js → es/md/ChatIcon.js b/es/md/Chat.js → es/md/ChatIcon.js
@@ -6,7 +6,7 @@ import { space, color } from "styled-system";
 var Svg = styled("svg")({
   flex: "none"
 }, space, color);
-var SvgChat = React.forwardRef(function (props, ref) {
+var SvgChatIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -20,9 +20,9 @@ var SvgChat = React.forwardRef(function (props, ref) {
     fill: "none"
   }));
 });
-SvgChat.displayName = "SvgChat";
-SvgChat.defaultProps = {
+SvgChatIcon.displayName = "SvgChatIcon";
+SvgChatIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-export default SvgChat;
+export default SvgChatIcon;
diff --git a/es/md/Link.js → es/md/LinkIcon.js b/es/md/Link.js → es/md/LinkIcon.js
@@ -6,7 +6,7 @@ import { space, color } from "styled-system";
 var Svg = styled("svg")({
   flex: "none"
 }, space, color);
-var SvgLink = React.forwardRef(function (props, ref) {
+var SvgLinkIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -20,9 +20,9 @@ var SvgLink = React.forwardRef(function (props, ref) {
     d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
   }));
 });
-SvgLink.displayName = "SvgLink";
-SvgLink.defaultProps = {
+SvgLinkIcon.displayName = "SvgLinkIcon";
+SvgLinkIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-export default SvgLink;
+export default SvgLinkIcon;
diff --git a/es/md/index.js b/es/md/index.js
@@ -89,7 +89,7 @@ export { default as BatteryStd } from './BatteryStd';
 export { default as BatteryUnknown } from './BatteryUnknown';
 export { default as BeachAccess } from './BeachAccess';
 export { default as Beenhere } from './Beenhere';
-export { default as Block } from './Block';
+export { default as BlockIcon } from './BlockIcon';
 export { default as Bluetooth } from './Bluetooth';
 export { default as BluetoothAudio } from './BluetoothAudio';
 export { default as BluetoothConnected } from './BluetoothConnected';
@@ -161,9 +161,9 @@ export { default as CastConnected } from './CastConnected';
 export { default as CenterFocusStrong } from './CenterFocusStrong';
 export { default as CenterFocusWeak } from './CenterFocusWeak';
 export { default as ChangeHistory } from './ChangeHistory';
-export { default as Chat } from './Chat';
 export { default as ChatBubble } from './ChatBubble';
 export { default as ChatBubbleOutline } from './ChatBubbleOutline';
+export { default as ChatIcon } from './ChatIcon';
 export { default as Check } from './Check';
 export { default as CheckBox } from './CheckBox';
 export { default as CheckBoxOutlineBlank } from './CheckBoxOutlineBlank';
@@ -474,7 +474,7 @@ export { default as LightbulbOutline } from './LightbulbOutline';
 export { default as LineStyle } from './LineStyle';
 export { default as LineWeight } from './LineWeight';
 export { default as LinearScale } from './LinearScale';
-export { default as Link } from './Link';
+export { default as LinkIcon } from './LinkIcon';
 export { default as LinkedCamera } from './LinkedCamera';
 export { default as List } from './List';
 export { default as LiveHelp } from './LiveHelp';

diff --git a/lib/md/Block.js → lib/md/BlockIcon.js b/lib/md/Block.js → lib/md/BlockIcon.js
@@ -27,7 +27,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var Svg = (0, _styledComponents2["default"])("svg")({
   flex: "none"
 }, _styledSystem.space, _styledSystem.color);
-var SvgBlock = React.forwardRef(function (props, ref) {
+var SvgBlockIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -41,9 +41,9 @@ var SvgBlock = React.forwardRef(function (props, ref) {
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9A7.902 7.902 0 014 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1A7.902 7.902 0 0120 12c0 4.42-3.58 8-8 8z"
   }));
 });
-SvgBlock.displayName = "SvgBlock";
-SvgBlock.defaultProps = {
+SvgBlockIcon.displayName = "SvgBlockIcon";
+SvgBlockIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-exports["default"] = SvgBlock;
+exports["default"] = SvgBlockIcon;
diff --git a/lib/md/Chat.js → lib/md/ChatIcon.js b/lib/md/Chat.js → lib/md/ChatIcon.js
@@ -27,7 +27,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var Svg = (0, _styledComponents2["default"])("svg")({
   flex: "none"
 }, _styledSystem.space, _styledSystem.color);
-var SvgChat = React.forwardRef(function (props, ref) {
+var SvgChatIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -41,9 +41,9 @@ var SvgChat = React.forwardRef(function (props, ref) {
     fill: "none"
   }));
 });
-SvgChat.displayName = "SvgChat";
-SvgChat.defaultProps = {
+SvgChatIcon.displayName = "SvgChatIcon";
+SvgChatIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-exports["default"] = SvgChat;
+exports["default"] = SvgChatIcon;
diff --git a/lib/md/Link.js → lib/md/LinkIcon.js b/lib/md/Link.js → lib/md/LinkIcon.js
@@ -27,7 +27,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var Svg = (0, _styledComponents2["default"])("svg")({
   flex: "none"
 }, _styledSystem.space, _styledSystem.color);
-var SvgLink = React.forwardRef(function (props, ref) {
+var SvgLinkIcon = React.forwardRef(function (props, ref) {
   return React.createElement(Svg, _extends({}, props, {
     viewBox: "0 0 24 24",
     height: props.size,
@@ -41,9 +41,9 @@ var SvgLink = React.forwardRef(function (props, ref) {
     d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
   }));
 });
-SvgLink.displayName = "SvgLink";
-SvgLink.defaultProps = {
+SvgLinkIcon.displayName = "SvgLinkIcon";
+SvgLinkIcon.defaultProps = {
   size: 24,
   color: "inherit"
 };
-exports["default"] = SvgLink;
+exports["default"] = SvgLinkIcon;
diff --git a/lib/md/index.js b/lib/md/index.js
@@ -823,12 +823,12 @@ Object.defineProperty(exports, "Beenhere", {
   }
 });
 
-var _Block = require("./Block");
+var _BlockIcon = require("./BlockIcon");
 
-Object.defineProperty(exports, "Block", {
+Object.defineProperty(exports, "BlockIcon", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Block)["default"];
+    return _interopRequireDefault(_BlockIcon)["default"];
   }
 });
 
@@ -1471,15 +1471,6 @@ Object.defineProperty(exports, "ChangeHistory", {
   }
 });
 
-var _Chat = require("./Chat");
-
-Object.defineProperty(exports, "Chat", {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_Chat)["default"];
-  }
-});
-
 var _ChatBubble = require("./ChatBubble");
 
 Object.defineProperty(exports, "ChatBubble", {
@@ -1498,6 +1489,15 @@ Object.defineProperty(exports, "ChatBubbleOutline", {
   }
 });
 
+var _ChatIcon = require("./ChatIcon");
+
+Object.defineProperty(exports, "ChatIcon", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_ChatIcon)["default"];
+  }
+});
+
 var _Check = require("./Check");
 
 Object.defineProperty(exports, "Check", {
@@ -4288,12 +4288,12 @@ Object.defineProperty(exports, "LinearScale", {
   }
 });
 
-var _Link = require("./Link");
+var _LinkIcon = require("./LinkIcon");
 
-Object.defineProperty(exports, "Link", {
+Object.defineProperty(exports, "LinkIcon", {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Link)["default"];
+    return _interopRequireDefault(_LinkIcon)["default"];
   }
 });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rimble/icons",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Cryptocurrency and Material icons ready for React with styled-components",
   "main": "index.js",
   "module": "index.es.js",