change structure and className

src/client/js/components/Icons/RecentlyCreatedIcon.jsx

@@ -27,18 +27,15 @@ const RecentlyCreatedIcon = () => (
         1.418,1.418,0,0,1,.587.133,1.937,1.937,0,0,1,.555.4,2.714,2.714,0,0,1,.5.629,1.266,1.266,0,0,1,.173.612,1.926,1.926,0,0,1-.661,1.289.052.052,
         0,0,1-.016.033l-.033.032-.048.049a4.42,4.42,0,0,0-.96-1.507,4.709,4.709,0,0,0-1.473-1.011Zm-9.692,13.375-1.794.6q.148-.5.546-1.73t.511-1.648a3.4,
         3.4,0,0,1,1.521.926,3.151,3.151,0,0,1,.8,1.324q-.333.118-1.582.53Z"
-        className="group1"
       />
       <path
         d="M938.7-176.431a.5.5,0,0,1-.359-.151l-2.276-2.355a.5.5,0,0,1-.14-.347v-3.425a.5.5,0,0,1,.5-.5h0a.5.5,0,0,1,.5.5h0v3.225l2.135
         ,2.209a.5.5,0,0,1-.011.7h0A.49.49,0,0,1,938.7-176.431Z"
-        className="group1"
       />
       <path
         d="M936.422-185.009a5.49,5.49,0,0,0-5.484,5.484,5.487,5.487,0,0,0,5.484,5.484,5.491,5.491,0,0,0,5.484-5.484A5.491,5.491,0,0,0,
         936.422-185.009Zm0,9.97a4.487,4.487,0,0,1-4.487-4.487,4.486,4.486,0,0,1,4.487-4.486,4.486,4.486,0,0,1,4.487,4.486A4.487,
         4.487,0,0,1,936.422-175.039Z"
-        className="group1"
       />
     </g>
   </svg>

src/client/js/components/TableOfContents.jsx

@@ -69,7 +69,7 @@ const TableOfContents = (props) => {
           <span>Bookmarks</span>
         </a>
         <a className="btn btn-outline-secondary btn-sm" href="#">
-          <i className="recently-created mr-2"><RecentlyCreatedIcon /></i>
+          <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
           <span>Recently Created</span>
         </a>
       </div>

src/client/styles/scss/_toc.scss

@@ -46,11 +46,11 @@
       margin: 4px 4px 4px 17px;
     }
   }
-}
 
-.recently-created {
-  svg {
-    width: 14px;
-    height: 14px;
+  .grw-icon-container-recently-created {
+    svg {
+      width: 14px;
+      height: 14px;
+    }
   }
 }