replace svg tags to its' components

src/client/js/components/TopOfTableContents.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
+import PageList from './PageList';
+import TimeLine from './TimeLine';
+import RecentChanges from './RecentChanges';
+import Attachment from './Attachment';
+
 import PageContainer from '../services/PageContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
@@ -13,61 +18,21 @@ const TopOfTableContents = (props) => {
     <>
       <div className="top-of-table-contents d-flex align-items-end pb-1">
         <button type="button" className="bg-transparent border-0">
-          {/* TODO: make svg icons components by GW-3349 */}
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
-            <rect className="cls-1" width="14" height="14" />
-            <path d="M12.63,2.72H1.37a.54.54,0,0,1,0-1.08H12.63a.54.54,0,0,1,0,1.08Z" />
-            <path d="M11.82,5.94H1.37a.55.55,0,0,1,0-1.09H11.82a.55.55,0,1,1,0,1.09Z" />
-            <path d="M9.41,9.15h-8a.54.54,0,0,1,0-1.08h8a.54.54,0,0,1,0,1.08Z" />
-            <path d="M10.84,12.36H1.37a.54.54,0,1,1,0-1.08h9.47a.54.54,0,1,1,0,1.08Z" />
-          </svg>
+          <PageList />
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
-            <rect className="cls-1" width="14" height="14" />
-            <path
-              d="M13.6,4.6a1.2,1.2,0,0,1-1.2,1.2,1,1,0,0,1-.3,0L10,7.89a1.1,1.1,0,0,1,0,.31,1.2,1.2,0,1,1-2.4,0,1.1,1.1,0,0,1,
-              0-.31L6.11,6.36a1.3,1.3,0,0,1-.62,0L2.75,9.1a1,1,0,0,1,0,.3A1.2,1.2,0,1,1,1.6,8.2a1,1,0,0,1,.3,0L4.64,
-              5.51a1.1,1.1,0,0,1,0-.31A1.2,1.2,0,0,1,7,5.2a1.1,1.1,0,0,1,0,.31L8.49,7a1.3,1.3,0,0,1,.62,0L11.25,4.9a1,
-              1,0,0,1-.05-.3,1.2,1.2,0,1,1,2.4,0Z"
-            />
-          </svg>
+          <TimeLine />
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
-            <rect className="cls-1" width="14" height="14" />
-            <path
-              d="M7.94.94A6.13,6.13,0,0,0,1.89,7v.1L.67,5.89a.38.38,0,0,0-.55,0,.39.39,0,0,0,0,.56L2.36,8.69,4.6,6.45a.4.4,0,0,0,0-.56.39.39,0,0,0-.56,
-              0L2.68,7.25V7A5.33,5.33,0,0,1,7.94,1.73,5.33,5.33,0,0,1,13.21,7a5.34,5.34,0,0,1-5.27,5.27H7.86A5,5,0,0,1,4,10.38a.4.4,0,0,0-.55-.07.4.4,0,
-              0,0-.07.56,5.83,5.83,0,0,0,4.52,2.19H8A6.13,6.13,0,0,0,14,7,6.13,6.13,0,0,0,7.94.94Z"
-            />
-            <path d="M7.94,2.83a.4.4,0,0,0-.39.4V7.37L10,8.92a.37.37,
-            0,0,0,.21.06.4.4,0,0,0,.21-.73L8.34,6.93V3.23A.4.4,0,0,0,7.94,2.83Z"
-            />
-          </svg>
+          <RecentChanges />
         </button>
 
         <button type="button" className="bg-transparent border-0">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
-            <rect className="cls-1" width="14" height="14" />
-            <g className="cls-2">
-              <path d="M2.9,13a2,2,0,0,1-1.44-.63,2.28,2.28,0,0,1,0-3.23l7-7.38a2.48,2.48,0,0,1,1.22-.7,2.61,
-              2.61,0,0,1,1.41.09A3.46,3.46,0,0,1,12.37,2a3.94,3.94,0,0,1,.36.45A2.61,2.61,0,0,1,13,3a3.41,3.41,
-              0,0,1,.16.57,3.06,3.06,0,0,1-.82,2.75L7.07,11.86a.35.35,0,0,1-.26.13.4.4,0,0,1-.28-.1.47.47,0,0,
-              1-.12-.27.39.39,0,0,1,.11-.29l5.26-5.59a2.28,2.28,0,0,0,.65-1.62,2.07,2.07,0,0,0-.62-1.58A2.62,2.62,
-              0,0,0,11,1.93a2,2,0,0,0-1-.13,1.63,1.63,0,0,0-1,.5L2,9.67a1.52,1.52,0,0,0,0,2.16,1.28,1.28,0,0,0,
-              .44.3,1,1,0,0,0,.51.08,1.43,1.43,0,0,0,1-.49L9.49,5.84l.12-.13.11-.15a1.24,1.24,0,0,0,.1-.2,1.94,
-              1.94,0,0,0,0-.2.6.6,0,0,0,0-.22.66.66,0,0,0-.14-.2.57.57,0,0,0-.45-.22,1,1,0,0,0-.52.3L4.56,
-              9.25a.42.42,0,0,1-.17.1.34.34,0,0,1-.2,0A.4.4,0,0,1,4,9.26.34.34,0,0,1,3.89,9,.41.41,0,0,1,4,8.72L8.16,
-              4.28a1.7,1.7,0,0,1,1-.53,1.32,1.32,0,0,1,1.06.43,1.23,1.23,0,0,1,.4,1.05,1.8,1.8,0,0,1-.58,1.14L4.52,
-              12.26A2.3,2.3,0,0,1,3,13H2.9Z"
-              />
-            </g>
-          </svg>
-
+          <Attachment />
         </button>
+
         {/* [TODO: setting Footprints' icon by GW-3308] */}
         <div
           id="seen-user-list"