Merge pull request #8530 from weseek/imprv/137284-141197-replace-original-icon

imprv: Replace original icon

apps/app/public/static/locales/en_US/translation.json

@@ -112,7 +112,7 @@
   "Create under": "Create page under below:",
   "V5 Page Migration": "Convert To V5 Compatibility",
   "GROWI.5.0_new_schema": "GROWI.5.0 new schema",
-  "See_more_detail_on_new_schema": "See more detail on <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html#about-the-new-v5-compatible-format' target='_blank'>{{title}}</a> <i class='icon-share-alt'></i> ",
+  "See_more_detail_on_new_schema": "See more detail on <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html#about-the-new-v5-compatible-format' target='_blank'>{{title}}</a> <span className='growi-custom-icons'>external_link</span> ",
   "external_account_management": "External Account Management",
   "UserGroup": "UserGroup",
   "Basic Settings": "Basic Settings",
@@ -559,7 +559,7 @@
     "alert_desc1": "On this page, you can select pages with the checkbox and batch convert to the new v5 compatible format from the \"Bulk operation\" button at the top of the screen.",
     "nopages_title": "Congratulations. Ready to use GROWI v5!",
     "nopages_desc1": "Now all the pages you can manage seem to be in v5 compatible format.",
-    "detail_info": "See the detail information from <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>Upgrading GROWI to v5.0.x <i class='icon-share-alt'></i></a>.",
+    "detail_info": "See the detail information from <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>Upgrading GROWI to v5.0.x <span className='growi-custom-icons'>external_link</span></a>.",
     "modal": {
       "title": "Convert to new v5 compatible format",
       "converting_pages": "Converting pages",

apps/app/public/static/locales/ja_JP/translation.json

@@ -111,7 +111,7 @@
   "Create under": "ページを以下に作成",
   "V5 Page Migration": "V5 互換形式 への変換",
   "GROWI.5.0_new_schema": "GROWI.5.0における新スキーマについて",
-  "See_more_detail_on_new_schema": "詳しくは<a href='https://docs.growi.org/ja/admin-guide/upgrading/50x.html#新しい-v5-互換形式について' target='_blank'>{{title}}</a><i class='icon-share-alt'></i>を参照ください。",
+  "See_more_detail_on_new_schema": "詳しくは<a href='https://docs.growi.org/ja/admin-guide/upgrading/50x.html#新しい-v5-互換形式について' target='_blank'>{{title}}</a><span className='growi-custom-icons'>external_link</span>を参照ください。",
   "external_account_management": "外部アカウント管理",
   "UserGroup": "グループ",
   "Basic Settings": "基本設定",
@@ -592,7 +592,7 @@
     "alert_desc1": "このページでは、チェックボックスでページを選択し、画面上部の「一括操作」ボタンから新しい v5 互換形式に一括変換できます。",
     "nopages_title": "おめでとうございます。GROWI v5 を使う準備が完了しました！",
     "nopages_desc1": "今あなたが管理可能なページはすべて v5 互換形式になっているようです。",
-    "detail_info": "詳しくは <a href='https://docs.growi.org/ja/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>GROWI v5.0.x へのアップグレード  <i class='icon-share-alt'></i></a> を参照ください。",
+    "detail_info": "詳しくは <a href='https://docs.growi.org/ja/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>GROWI v5.0.x へのアップグレード <span className='growi-custom-icons'>external_link</span></a> を参照ください。",
     "modal": {
       "title": "新しい v5 互換形式への変換",
       "converting_pages": "以下のページを変換します",

apps/app/public/static/locales/zh_CN/translation.json

@@ -117,7 +117,7 @@
 	"Create under": "Create page under below:",
   "V5 Page Migration": "转换为V5的兼容性",
   "GROWI.5.0_new_schema": "GROWI.5.0 new schema",
-  "See_more_detail_on_new_schema": "更多详情请见<a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html#about-the-new-v5-compatible-format' target='_blank'> {{title}}</a> <i class='icon-share-alt'></i> ",
+  "See_more_detail_on_new_schema": "更多详情请见<a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html#about-the-new-v5-compatible-format' target='_blank'> {{title}}</a> <span className='growi-custom-icons'>external_link</span> ",
 	"Markdown Settings": "Markdown设置",
 	"external_account_management": "外部账户管理",
   "UserGroup": "用户组",
@@ -562,7 +562,7 @@
     "alert_desc1": "在这一页，你可以用复选框选择页面，并通过屏幕上方的批量操作按钮批量转换为新的v5兼容格式。",
     "nopages_title": "恭喜你。准备使用GROWI v5!",
     "nopages_desc1": "现在你能管理的所有页面似乎都是v5兼容的格式。",
-    "detail_info": "请参见 <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>升级GROWI到v5.0.x <i class='icon-share-alt'></i></a>.的详细内容。",
+    "detail_info": "请参见 <a href='https://docs.growi.org/en/admin-guide/upgrading/50x.html' target='_blank' class='alert-link'>升级GROWI到v5.0.x <span className='growi-custom-icons'>external_link</span></a>.的详细内容。",
     "modal": {
       "title": "转换为新的v5兼容格式",
       "converting_pages": "转换页面",

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -471,7 +471,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                           target="_blank"
                           rel="noreferer noreferrer"
                         >
-                          Apache Lucene - Query Parser Syntax <i className="icon-share-alt"></i>
+                          Apache Lucene - Query Parser Syntax <span className="growi-custom-icons">external_link</span>
                         </a>.
                       </p>
                       <div className="accordion" id="accordionId">

apps/app/src/components/PageEditor/Cheatsheet.tsx

@@ -105,7 +105,7 @@ export const Cheatsheet = (): JSX.Element => {
 
         <hr />
         <a href="/Sandbox" className="btn btn-info" target="_blank">
-          <i className="icon-share-alt" /> {t('sandbox.open_sandbox')}
+          <span className="growi-custom-icons">external_link</span> {t('sandbox.open_sandbox')}
         </a>
       </div>
     </div>

apps/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -1,5 +1,6 @@
 import { pagePathUtils } from '@growi/core/dist/utils';
-import Link, { LinkProps } from 'next/link';
+import type { LinkProps } from 'next/link';
+import Link from 'next/link';
 
 import { useSiteUrl } from '~/stores/context';
 import loggerFactory from '~/utils/logger';
@@ -61,7 +62,7 @@ export const NextLink = (props: Props): JSX.Element => {
   if (isExternalLink(href, siteUrl)) {
     return (
       <a id={id} href={href} className={className} target="_blank" rel="noopener noreferrer" {...dataAttributes}>
-        {children}&nbsp;<i className="icon-share-alt small"></i>
+        {children}&nbsp;<span className="growi-custom-icons">external_link</span>
       </a>
     );
   }

apps/app/src/components/UsersHomepageFooter.module.scss

@@ -4,7 +4,10 @@ $grw-sidebar-content-footer-height: 50px;
 
 .user-page-footer :global {
   .grw-user-page-list-m {
-    .list-group{
+    .growi-custom-icons {
+      font-size: 1.1em;
+    }
+    .list-group {
       .list-group-item {
         .grw-visible-on-hover {
           display: none;
@@ -15,20 +18,19 @@ $grw-sidebar-content-footer-height: 50px;
             display: block;
           }
         }
-        .grw-triangle-container{
+        .grw-triangle-container {
           svg {
             width: 12px;
             height: 12px;
           }
         }
-        svg{
+        svg {
           width: 20px;
           height: 20px;
         }
         min-height: 40px;
         border-radius: 0px;
 
-
         &.grw-bookmark-item-list {
           .picture {
             width: 16px;
@@ -40,17 +42,15 @@ $grw-sidebar-content-footer-height: 50px;
               height: 20px;
             }
           }
-          svg{
+          svg {
             width: 14px;
             height: 14px;
           }
-          .grw-foldertree-control{
+          .grw-foldertree-control {
             margin-left: 1rem;
           }
         }
       }
-
-
     }
 
     .grw-foldertree-item-container {
@@ -58,7 +58,7 @@ $grw-sidebar-content-footer-height: 50px;
         max-width: 25%;
       }
     }
-    .grw-foldertree-title-anchor{
+    .grw-foldertree-title-anchor {
       width: fit-content !important;
       margin-right: 20px;
     }
@@ -67,7 +67,7 @@ $grw-sidebar-content-footer-height: 50px;
       height: 35px;
       margin-bottom: 6px;
     }
-    .new-bookmark-folder{
+    .new-bookmark-folder {
       max-height: 30px;
       svg {
         width: 18px;

apps/app/src/components/UsersHomepageFooter.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-
 import { RecentlyCreatedIcon } from '~/components/Icons/RecentlyCreatedIcon';
 import { RecentCreated } from '~/components/RecentCreated/RecentCreated';
 import styles from '~/components/UsersHomepageFooter.module.scss';
@@ -13,8 +12,8 @@ import { CompressIcon } from './Icons/CompressIcon';
 import { ExpandIcon } from './Icons/ExpandIcon';
 
 export type UsersHomepageFooterProps = {
-  creatorId: string,
-}
+  creatorId: string;
+};
 
 export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Element => {
   const { t } = useTranslation();
@@ -30,15 +29,8 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
           <span style={{ fontSize: '1.3em' }} className="material-symbols-outlined">bookmark</span>
           {t('footer.bookmarks')}
           <span className="ms-auto ps-2 ">
-            <button
-              type="button"
-              className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`}
-              onClick={() => setIsExpanded(!isExpanded)}
-            >
-              { isExpanded
-                ? <ExpandIcon />
-                : <CompressIcon />
-              }
+            <button type="button" className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`} onClick={() => setIsExpanded(!isExpanded)}>
+              {isExpanded ? <ExpandIcon /> : <CompressIcon />}
             </button>
           </span>
         </h2>
@@ -49,7 +41,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">
         <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
-          <i id="recent-created-icon" className="me-1"><RecentlyCreatedIcon /></i>
+          <span className="growi-custom-icons me-1">recently_created</span>
           {t('footer.recently_created')}
         </h2>
         <div id="user-created-list" className={`page-list ${styles['page-list']}`}>

apps/app/src/pages/installer.page.tsx

@@ -47,7 +47,7 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
         i18n: t('installer.tab'),
       },
       external_accounts: {
-        Icon: () => <i className="icon-fw icon-share-alt"></i>,
+        Icon: () => <span className="growi-custom-icons">external_link</span>,
         Content: DataTransferForm,
         i18n: tCommons('g2g_data_transfer.tab'),
       },

packages/custom-icons/svg/drawer_io.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a,.c{fill:none;}.a{stroke:#707070;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(-14953 -18037)"/></clipPath></defs><g class="b" transform="translate(14953 18037)"><path class="c" d="M70.158,9.041H67.433L65.921,6.46a.909.909,0,0,0,.35-.706V1.477a.942.942,0,0,0-.95-.932H60.932a.942.942,0,0,0-.95.932V5.755a.911.911,0,0,0,.35.706l-1.511,2.58H56.057a.942.942,0,0,0-.949.932v4.277a.942.942,0,0,0,.949.932h4.389a.941.941,0,0,0,.949-.932V9.972a.941.941,0,0,0-.949-.932h-.107l1.38-2.354h2.815l1.379,2.354H65.77a.942.942,0,0,0-.95.932v4.277a.942.942,0,0,0,.95.932h4.388a.942.942,0,0,0,.95-.932V9.972a.942.942,0,0,0-.95-.932m-10.08,4.848H56.425V10.333h3.653ZM61.3,1.838h3.653V5.394H61.3Zm8.491,12.051H66.137V10.333h3.653Z" transform="translate(-15004.108 -18032.863)"/></g></svg>

packages/custom-icons/svg/external_link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.999" height="21.999" viewBox="0 0 21.999 21.999"><defs><style>.a{fill:none;}</style></defs><path class="a" d="M18.533,13.9h1.787v5.981A2.114,2.114,0,0,1,18.2,22H2.116A2.115,2.115,0,0,1,0,19.883V3.8A2.115,2.115,0,0,1,2.116,1.68H8.1V3.467H2.116a.329.329,0,0,0-.328.328V19.883a.329.329,0,0,0,.328.328H18.2a.329.329,0,0,0,.328-.328ZM11.788,0V1.7h7.252L7.094,13.641l1.264,1.265L20.3,2.96v7.253H22V0Z"/></svg>

packages/custom-icons/svg/format_quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{clip-path:url(#a);}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(376 36)"/></clipPath></defs><g class="b" transform="translate(-376 -36)"><path class="a" d="M32.359,16.068v1.823H47.21V16.068Zm0-5.327H47.21V8.919H32.359Zm0-7.152H47.21V1.767H32.359ZM27.1,19.659h1.822V0H27.1Z" transform="translate(350.789 38.172)"/></g></svg>

packages/custom-icons/svg/header.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;}.b{clip-path:url(#a);}.c{fill:none;}</style><clipPath id="a"><rect class="a" width="24" height="24" transform="translate(-14908 -18037)"/></clipPath></defs><g class="b" transform="translate(14908 18037)"><path class="c" d="M10.813.26v7H2.008v-7H0v16H2.008v-7h8.805v7h2.008V.26Z" transform="translate(-14902.41 -18033.26)"/></g></svg>

packages/custom-icons/svg/recently_created.svg

@@ -1,8 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21.569" viewBox="0 0 21 21.569">
-  <g id="8883" data-name="8883" transform="translate(-288.73 -162.502)">
-    <path id="14245" data-name="14245" d="M18.841,15.3a4.123,4.123,0,1,1-1.028-2.714H16.271v1.158h3.213V10.53H18.326v.929A5.261,5.261,0,1,0,20,15.3Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <path id="14246" data-name="14246" d="M14.151,12.351v3.165l2.021,2.312.872-.762L15.31,15.081v-2.73Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <path id="14247" data-name="14247" d="M16.933,4.241a1.645,1.645,0,0,0,.489-1.19,1.582,1.582,0,0,0-.469-1.19L15.6.5a1.631,1.631,0,0,0-2.36,0L12.075,1.667l3.706,3.726Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-    <path id="14248" data-name="14248" d="M10.932,2.819,0,13.751v3.706H3.706L14.638,6.525ZM3,15.81H1.647V14.459l9.3-9.3.682.683.667.667Z" transform="translate(289.23 163.002)" fill="#C4C2BD" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20.001" height="20.568" viewBox="0 0 20.001 20.568"><defs><style>.a{fill:none;}</style></defs><path class="a" d="M15437.46,17968.3a5.262,5.262,0,0,1,8.868-3.844v-.93h1.154v3.217h-3.212v-1.158h1.543a4.109,4.109,0,1,0,1.028,2.715H15448a5.271,5.271,0,0,1-10.541,0Zm4.69.217v-3.168h1.159v2.734l1.732,1.98-.87.762Zm-14.15,1.939v-3.7l10.93-10.936,3.708,3.709-10.934,10.93Zm1.646-3v1.354h1.35l9.3-9.3-.668-.668-.681-.682Zm10.43-12.787,1.159-1.164a1.633,1.633,0,0,1,2.363,0l1.354,1.357a1.578,1.578,0,0,1,.469,1.186,1.647,1.647,0,0,1-.487,1.191l-1.154,1.15Z" transform="translate(-15428 -17953)"/></svg>

packages/editor/src/components/CodeMirrorEditor/Toolbar/DiagramButton.tsx

@@ -14,7 +14,7 @@ export const DiagramButton = (props: Props): JSX.Element => {
   }, [editorKey, openDrawioModal]);
   return (
     <button type="button" className="btn btn-toolbar-button" onClick={onClickDiagramButton}>
-      <span className="material-symbols-outlined fs-5">lan</span>
+      <span className="growi-custom-icons">drawer_io</span>
     </button>
   );
 };

packages/editor/src/components/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -69,7 +69,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             <span className="material-symbols-outlined fs-5">format_strikethrough</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertPrefix('#', true)}>
-            <span className="material-symbols-outlined fs-5">block</span>
+            <span className="growi-custom-icons">header</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('`', '`')}>
             <span className="material-symbols-outlined fs-5">code</span>
@@ -81,7 +81,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
             <span className="material-symbols-outlined fs-5">format_list_numbered</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertPrefix('>')}>
-            <span className="material-symbols-outlined fs-5">block</span>
+            <span className="growi-custom-icons">format_quote</span>
           </button>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertPrefix('- [ ]')}>
             <span className="material-symbols-outlined fs-5">checklist</span>