Merge pull request #6323 from weseek/support/install-themify-icons-npm

Support/install themify icons npm

packages/app/package.json

@@ -237,6 +237,7 @@
     "sticky-events": "^3.4.11",
     "swagger2openapi": "^5.3.1",
     "swr": "^1.3.0",
+    "@icon/themify-icons": "1.0.1-alpha.3",
     "throttle-debounce": "^3.0.1",
     "toastr": "^2.1.2",
     "ts-node-dev": "^2.0.0",

packages/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -40,7 +40,7 @@ const FileUploadSetting = (props: Props) => {
         <br />
         <br />
         <span className="text-danger">
-          <i className="ti-unlink"></i>
+          <i className="ti ti-unlink"></i>
           {t('admin:app_setting.change_setting')}
         </span>
       </p>

packages/app/src/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 import urljoin from 'url-join';
 
 import AppContainer from '~/client/services/AppContainer';
@@ -172,7 +172,7 @@ class ManageGlobalNotification extends React.Component {
                 <>
                   <div className="input-group notify-to-option" id="mail-input">
                     <div className="input-group-prepend">
-                      <span className="input-group-text" id="mail-addon"><i className="ti-email" /></span>
+                      <span className="input-group-text" id="mail-addon"><i className="ti ti-email" /></span>
                     </div>
                     <input
                       className="form-control"

packages/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import { UserPicture } from '@growi/ui';
 import dateFnsFormat from 'date-fns/format';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import AppContainer from '~/client/services/AppContainer';
@@ -96,7 +96,7 @@ class UserGroupUserTable extends React.Component {
             <td></td>
             <td className="text-center">
               <button className="btn btn-outline-secondary" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
-                <i className="ti-plus"></i>
+                <i className="ti ti-plus"></i>
               </button>
             </td>
             <td></td>

packages/app/src/components/LoginForm.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import ReactCardFlip from 'react-card-flip';
-import { useTranslation } from 'next-i18next';
 
 import AppContainer from '~/client/services/AppContainer';
 import { useCsrfToken } from '~/stores/context';
@@ -309,7 +309,7 @@ class LoginForm extends React.Component {
                 {isRegistrationEnabled && (
                   <div className="text-right mb-2">
                     <a href="#register" id="register" className="link-switch" onClick={this.switchForm}>
-                      <i className="ti-check-box"></i> {t('Sign up is here')}
+                      <i className="ti ti-check-box"></i> {t('Sign up is here')}
                     </a>
                   </div>
                 )}

packages/app/src/components/Me/DisassociateModal.tsx

@@ -57,7 +57,7 @@ const DisassociateModal = (props: Props): JSX.Element => {
           { t('Cancel') }
         </button>
         <button type="button" className="btn btn-sm btn-danger" onClick={disassociateAccountHandler}>
-          <i className="ti-unlink"></i>
+          <i className="ti ti-unlink"></i>
           { t('Disassociate') }
         </button>
       </ModalFooter>

packages/app/src/components/Me/ExternalAccountRow.jsx

@@ -2,8 +2,8 @@
 import React from 'react';
 
 import dateFnsFormat from 'date-fns/format';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 const ExternalAccountRow = (props) => {
   const { t } = useTranslation();
@@ -22,7 +22,7 @@ const ExternalAccountRow = (props) => {
           className="btn btn-sm btn-danger"
           onClick={() => props.openDisassociateModal(account)}
         >
-          <i className="ti-unlink"></i>
+          <i className="ti ti-unlink"></i>
           { t('Disassociate') }
         </button>
       </td>

packages/app/src/components/PageComment/CommentControl.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
 
@@ -6,10 +7,10 @@ const CommentControl = (props) => {
   return (
     <div className="page-comment-control">
       <button type="button" className="btn btn-link p-2" onClick={props.onClickEditBtn}>
-        <i className="ti-pencil"></i>
+        <i className="ti ti-pencil"></i>
       </button>
       <button type="button" className="btn btn-link p-2 mr-2" onClick={props.onClickDeleteBtn}>
-        <i className="ti-close"></i>
+        <i className="ti ti-close"></i>
       </button>
     </div>
   );

packages/app/src/components/PageEditor/HandsontableModal.jsx

@@ -453,9 +453,15 @@ export default class HandsontableModal extends React.PureComponent {
               <span className="mr-3">Data Import</span><i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
             </button>
             <div role="group" className="btn-group">
-              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('l') }}><i className="ti-align-left"></i></button>
-              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('c') }}><i className="ti-align-center"></i></button>
-              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('r') }}><i className="ti-align-right"></i></button>
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('l') }}>
+                <i className="ti ti-align-left"></i>
+              </button>
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('c') }}>
+                <i className="ti ti-align-center"></i>
+              </button>
+              <button type="button" className="btn btn-secondary" onClick={() => { this.alignButtonHandler('r') }}>
+                <i className="ti ti-align-right"></i>
+              </button>
             </div>
             <Collapse isOpen={this.state.isDataImportAreaExpanded}>
               <div className="mt-4">

packages/app/src/components/PagePathNav.tsx

@@ -50,7 +50,7 @@ const PagePathNav: FC<Props> = (props: Props) => {
         { pageId != null && (
           <div className="mx-2">
             <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
-              <i className="ti-clipboard"></i>
+              <i className="ti ti-clipboard"></i>
             </CopyDropdown>
           </div>
         ) }

packages/app/src/components/RevisionComparer/RevisionComparer.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 
 import { pagePathUtils } from '@growi/core';
+import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
@@ -78,7 +78,7 @@ const RevisionComparer = (props) => {
             caret
             className="d-block text-muted bg-transparent btn-copy border-0 py-0"
           >
-            <i className="ti-clipboard"></i>
+            <i className="ti ti-clipboard"></i>
           </DropdownToggle>
           <DropdownMenu positionFixed right modifiers={{ preventOverflow: { boundariesElement: undefined } }}>
             {/* Page path URL */}

packages/app/src/server/views/widget/page_alerts.html

@@ -39,7 +39,7 @@
       {% set hasRedirectLink = redirectFrom or req.query.redirectFrom or req.query.withRedirect %}
       {% if user and not page.isDeleted() and hasRedirectLink %}
         <button type="button" id="unlink-page-button" class="btn btn-outline-dark btn-sm float-right">
-          <i class="ti-unlink" aria-hidden="true"></i>
+          <i class="ti ti-unlink" aria-hidden="true"></i>
           Unlink redirection
         </button>
       {% endif %}

packages/app/src/styles/style-next.scss

@@ -16,6 +16,8 @@
 @import '~simple-line-icons';
 @import '~material-icons/iconfont/filled';
 @import '~font-awesome';
+@import '~@icon/themify-icons/themify-icons';
+
 
 // // atoms
 @import 'atoms/buttons';

packages/plugin-lsx/src/client/js/components/LsxPageList/LsxPage.jsx

@@ -74,8 +74,8 @@ export class LsxPage extends React.Component {
 
   getIconElement() {
     return (this.state.isExists)
-      ? <i className="ti-agenda" aria-hidden="true"></i>
-      : <i className="ti-file lsx-page-not-exist" aria-hidden="true"></i>;
+      ? <i className="ti ti-agenda" aria-hidden="true"></i>
+      : <i className="ti ti-file lsx-page-not-exist" aria-hidden="true"></i>;
   }
 
   render() {

yarn.lock

@@ -1894,6 +1894,11 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
+"@icon/themify-icons@1.0.1-alpha.3":
+  version "1.0.1-alpha.3"
+  resolved "https://registry.yarnpkg.com/@icon/themify-icons/-/themify-icons-1.0.1-alpha.3.tgz#adb1652d37d4e58f507b1634785a3779f6829e0b"
+  integrity sha512-KDE5pjBgnEVugPhcQxBmhMMT+5n2YU/A6yHHeDHSGL68gHaLp27a5WxV4LVakN0kiiA3MVdSkUPdX6n/UWS7zw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"