úse icons

wax-prosemirror-components/src/icons/icons.js

@@ -387,10 +387,21 @@ export default {
     </Svg>
   ),
   cutomInline: ({ className }) => (
-    <Svg className={className}
-      viewBox="0 0 426.66667 426.66667" fill="none"
-    >
+    <Svg className={className} fill="none" viewBox="0 0 426.66667 426.66667">
+      <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
+    </Svg>
+  ),
+  IconCross: ({ className }) => (
+    <Svg className={className} viewBox="0 0 409.6 409.6" fill="none">
       <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
     </Svg>
-  )
+  ),
+  IconMinus: ({ className }) => (
+    <Svg className={className} fill="none" viewBox="0 0 409.6 409.6">
+      <path
+        d="M392.533,187.733H17.067C7.641,187.733,0,195.374,0,204.8s7.641,17.067,17.067,17.067h375.467
+  c9.426,0,17.067-7.641,17.067-17.067S401.959,187.733,392.533,187.733z"
+      />
+    </Svg>
+  ),
 };

wax-prosemirror-components/src/ui/tabs/BlockElementGroup.js

@@ -4,6 +4,7 @@ import { th } from '@pubsweet/ui-toolkit';
 import styled from 'styled-components';
 import CustomTagBlockComponent from '../../components/customtag/CustomTagBlockComponent';
 import BlockElement from './BlockElement';
+import Icon from '../../helpers/Icon';
 
 const Wrapper = styled.div``;
 
@@ -24,35 +25,7 @@ const FlexDiv = styled.div`
   justify-content: space-between;
 `;
 
-const IconPlusSVG = props => {
-  const { className } = props;
-  return (
-    <svg className={className} viewBox="0 0 426.66667 426.66667" fill="none">
-      <path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
-    </svg>
-  );
-};
-
-const Icon = styled(IconPlusSVG)`
-  cursor: pointer;
-  fill: ${th('colorPrimary')};
-  height: 10px;
-  width: 10px;
-`;
-
-const IconCrossSVG = props => {
-  const { className } = props;
-  return (
-    <svg className={className} viewBox="0 0 409.6 409.6" fill="none">
-      <path
-        d="M392.533,187.733H17.067C7.641,187.733,0,195.374,0,204.8s7.641,17.067,17.067,17.067h375.467
-  c9.426,0,17.067-7.641,17.067-17.067S401.959,187.733,392.533,187.733z"
-      />
-    </svg>
-  );
-};
-
-const IconCross = styled(IconCrossSVG)`
+const StyledIcon = styled(Icon)`
   cursor: pointer;
   fill: ${th('colorPrimary')};
   height: 10px;
@@ -86,8 +59,8 @@ const BlockElementGroup = props => {
           <FlexDiv>
             <GroupName>{groupName}</GroupName>
             <div aria-hidden="true" onClick={onIconClick}>
-              {isIconClicked === false && <Icon />}
-              {isIconClicked === true && <IconCross />}
+              {!isIconClicked && <StyledIcon name="IconCross" />}
+              {isIconClicked && <StyledIcon name="IconMinus" />}
             </div>
           </FlexDiv>
           <ListWrapper>