From 02aff31ef153ed400d9348b2f9518861993778d2 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 31 Dec 2020 21:07:52 +0800
Subject: ...

---
 FrontEnd/src/app/views/timeline-common/CollapseButton.tsx   | 12 ++++++------
 .../src/app/views/timeline-common/TimelineCardTemplate.tsx  | 13 ++++---------
 FrontEnd/src/app/views/timeline-common/TimelineItem.tsx     | 13 ++++---------
 FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx | 11 +++++------
 4 files changed, 19 insertions(+), 30 deletions(-)

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
index 3c52150f..da54f3fd 100644
--- a/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
+++ b/FrontEnd/src/app/views/timeline-common/CollapseButton.tsx
@@ -1,8 +1,5 @@
 import React from "react";
 import clsx from "clsx";
-import Svg from "react-inlinesvg";
-import arrowsAngleContractIcon from "bootstrap-icons/icons/arrows-angle-contract.svg";
-import arrowsAngleExpandIcon from "bootstrap-icons/icons/arrows-angle-expand.svg";
 
 const CollapseButton: React.FC<{
   collapse: boolean;
@@ -11,10 +8,13 @@ const CollapseButton: React.FC<{
   style?: React.CSSProperties;
 }> = ({ collapse, onClick, className, style }) => {
   return (
-    <Svg
-      src={collapse ? arrowsAngleExpandIcon : arrowsAngleContractIcon}
+    <i
       onClick={onClick}
-      className={clsx("text-primary icon-button", className)}
+      className={clsx(
+        collapse ? "bi-arrows-angle-expand" : "bi-arrows-angle-contract",
+        "text-primary icon-button",
+        className
+      )}
       style={style}
     />
   );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
index ffec1a90..b42b3aa3 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineCardTemplate.tsx
@@ -2,9 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { Dropdown, Button } from "react-bootstrap";
-import Svg from "react-inlinesvg";
-import starIcon from "bootstrap-icons/icons/star.svg";
-import bookmarkIcon from "bootstrap-icons/icons/bookmark.svg";
 
 import { timelineVisibilityTooltipTranslationMap } from "@/services/timeline";
 
@@ -58,16 +55,14 @@ function TimelineCardTemplate({
         </small>
         <div className="text-right mt-2">
           {onHighlight != null ? (
-            <Svg
-              src={starIcon}
-              className="icon-button text-yellow mr-3"
+            <i
+              className="bi-star icon-button text-yellow mr-3"
               onClick={onHighlight}
             />
           ) : null}
           {onBookmark != null ? (
-            <Svg
-              src={bookmarkIcon}
-              className="icon-button text-yellow mr-3"
+            <i
+              className="bi-bookmark icon-button text-yellow mr-3"
               onClick={onBookmark}
             />
           ) : null}
diff --git a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
index 408c49a1..233c81bd 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelineItem.tsx
@@ -2,9 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import Svg from "react-inlinesvg";
-import chevronDownIcon from "bootstrap-icons/icons/chevron-down.svg";
-import trashIcon from "bootstrap-icons/icons/trash.svg";
 import { Modal, Button } from "react-bootstrap";
 
 import { useAvatar } from "@/services/user";
@@ -98,9 +95,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             <small className="text-dark">{props.post.author.nickname}</small>
           </span>
           {more != null ? (
-            <Svg
-              src={chevronDownIcon}
-              className="text-info icon-button"
+            <i
+              className="bi-chevron-down text-info icon-button"
               onClick={(e) => {
                 more.toggle();
                 e.stopPropagation();
@@ -139,9 +135,8 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
             className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
             onClick={more.toggle}
           >
-            <Svg
-              src={trashIcon}
-              className="text-danger icon-button large"
+            <i
+              className="bi-trash text-danger icon-button large"
               onClick={(e) => {
                 setDeleteDialog(true);
                 e.stopPropagation();
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index dfa2f879..207bf6af 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -1,10 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import Svg from "react-inlinesvg";
 import { Button, Spinner, Row, Col, Form } from "react-bootstrap";
-import textIcon from "bootstrap-icons/icons/card-text.svg";
-import imageIcon from "bootstrap-icons/icons/image.svg";
 
 import { UiLogicError } from "@/common";
 
@@ -212,10 +209,12 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
               return (
                 <>
                   <div className="d-block text-center mt-1 mb-2">
-                    <Svg
+                    <i
                       onLoad={notifyHeightChange}
-                      src={kind === "text" ? imageIcon : textIcon}
-                      className="icon-button"
+                      className={clsx(
+                        kind === "text" ? "bi-image" : "bi-card-text",
+                        "icon-button"
+                      )}
                       onClick={toggleKind}
                     />
                   </div>
-- 
cgit v1.2.3