From 6284996df5d0068c11a6a4ea3bd90672fab7bb00 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sat, 10 Apr 2021 13:12:13 +0800
Subject: [PATCH] chore(svg-icons): to ts & fix warnings

---
 src/components/ArticleItemPrefixLabel/styles/index.ts          | 2 +-
 src/components/InlineTags/styles/index.ts                      | 2 +-
 src/components/SvgIcons/{HashTagSVG.js => HashTagSVG.tsx}      | 2 +-
 .../SvgIcons/{HeaderMailSVG.js => HeaderMailSVG.tsx}           | 2 +-
 .../SvgIcons/{HeaderSearchSVG.js => HeaderSearchSVG.tsx}       | 2 +-
 .../SvgIcons/{HeaderStatesSVG.js => HeaderStatesSVG.tsx}       | 2 +-
 src/components/SvgIcons/{PinSVG.js => PinSVG.tsx}              | 2 +-
 src/components/SvgIcons/{TabAISVG.js => TabAISVG.tsx}          | 2 +-
 .../SvgIcons/{TabBackendSVG.js => TabBackendSVG.tsx}           | 2 +-
 .../SvgIcons/{TabBillingSVG.js => TabBillingSVG.tsx}           | 2 +-
 .../SvgIcons/{TabBlockChainSVG.js => TabBlockChainSVG.tsx}     | 2 +-
 .../SvgIcons/{TabCheatsheetSVG.js => TabCheatsheetSVG.tsx}     | 2 +-
 src/components/SvgIcons/{TabCitySVG.js => TabCitySVG.tsx}      | 2 +-
 .../SvgIcons/{TabCommentsSVG.js => TabCommentsSVG.tsx}         | 2 +-
 src/components/SvgIcons/{TabDesignSVG.js => TabDesignSVG.tsx}  | 2 +-
 .../SvgIcons/{TabFavoritesSVG.js => TabFavoritesSVG.tsx}       | 2 +-
 .../SvgIcons/{TabFrontendSVG.js => TabFrontendSVG.tsx}         | 2 +-
 src/components/SvgIcons/{TabJobSVG.js => TabJobSVG.tsx}        | 2 +-
 src/components/SvgIcons/{TabLikesSVG.js => TabLikesSVG.tsx}    | 2 +-
 src/components/SvgIcons/{TabMobileSVG.js => TabMobileSVG.tsx}  | 2 +-
 src/components/SvgIcons/{TabPlSVG.js => TabPlSVG.tsx}          | 2 +-
 src/components/SvgIcons/{TabPostSVG.js => TabPostSVG.tsx}      | 2 +-
 .../SvgIcons/{TabPublishSVG.js => TabPublishSVG.tsx}           | 2 +-
 src/components/SvgIcons/{TabRadarSVG.js => TabRadarSVG.tsx}    | 2 +-
 src/components/SvgIcons/{TabRepoSVG.js => TabRepoSVG.tsx}      | 2 +-
 .../SvgIcons/{TabSettingsSVG.js => TabSettingsSVG.tsx}         | 2 +-
 src/components/SvgIcons/{TabShareSVG.js => TabShareSVG.tsx}    | 2 +-
 src/components/SvgIcons/{TabTechSVG.js => TabTechSVG.tsx}      | 2 +-
 src/components/SvgIcons/{TabUserSVG.js => TabUserSVG.tsx}      | 2 +-
 src/components/SvgIcons/{TabVideoSVG.js => TabVideoSVG.tsx}    | 2 +-
 src/components/SvgIcons/{TabWikiSVG.js => TabWikiSVG.tsx}      | 2 +-
 src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts    | 3 ++-
 32 files changed, 33 insertions(+), 32 deletions(-)
 rename src/components/SvgIcons/{HashTagSVG.js => HashTagSVG.tsx} (95%)
 rename src/components/SvgIcons/{HeaderMailSVG.js => HeaderMailSVG.tsx} (96%)
 rename src/components/SvgIcons/{HeaderSearchSVG.js => HeaderSearchSVG.tsx} (94%)
 rename src/components/SvgIcons/{HeaderStatesSVG.js => HeaderStatesSVG.tsx} (98%)
 rename src/components/SvgIcons/{PinSVG.js => PinSVG.tsx} (93%)
 rename src/components/SvgIcons/{TabAISVG.js => TabAISVG.tsx} (96%)
 rename src/components/SvgIcons/{TabBackendSVG.js => TabBackendSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabBillingSVG.js => TabBillingSVG.tsx} (96%)
 rename src/components/SvgIcons/{TabBlockChainSVG.js => TabBlockChainSVG.tsx} (95%)
 rename src/components/SvgIcons/{TabCheatsheetSVG.js => TabCheatsheetSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabCitySVG.js => TabCitySVG.tsx} (96%)
 rename src/components/SvgIcons/{TabCommentsSVG.js => TabCommentsSVG.tsx} (96%)
 rename src/components/SvgIcons/{TabDesignSVG.js => TabDesignSVG.tsx} (96%)
 rename src/components/SvgIcons/{TabFavoritesSVG.js => TabFavoritesSVG.tsx} (93%)
 rename src/components/SvgIcons/{TabFrontendSVG.js => TabFrontendSVG.tsx} (94%)
 rename src/components/SvgIcons/{TabJobSVG.js => TabJobSVG.tsx} (96%)
 rename src/components/SvgIcons/{TabLikesSVG.js => TabLikesSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabMobileSVG.js => TabMobileSVG.tsx} (95%)
 rename src/components/SvgIcons/{TabPlSVG.js => TabPlSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabPostSVG.js => TabPostSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabPublishSVG.js => TabPublishSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabRadarSVG.js => TabRadarSVG.tsx} (95%)
 rename src/components/SvgIcons/{TabRepoSVG.js => TabRepoSVG.tsx} (92%)
 rename src/components/SvgIcons/{TabSettingsSVG.js => TabSettingsSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabShareSVG.js => TabShareSVG.tsx} (96%)
 rename src/components/SvgIcons/{TabTechSVG.js => TabTechSVG.tsx} (92%)
 rename src/components/SvgIcons/{TabUserSVG.js => TabUserSVG.tsx} (97%)
 rename src/components/SvgIcons/{TabVideoSVG.js => TabVideoSVG.tsx} (93%)
 rename src/components/SvgIcons/{TabWikiSVG.js => TabWikiSVG.tsx} (96%)

diff --git a/src/components/ArticleItemPrefixLabel/styles/index.ts b/src/components/ArticleItemPrefixLabel/styles/index.ts
index 42a6bab8a..cdc34b8dd 100755
--- a/src/components/ArticleItemPrefixLabel/styles/index.ts
+++ b/src/components/ArticleItemPrefixLabel/styles/index.ts
@@ -17,7 +17,7 @@ export const ReadedLabel = styled.div<{ topOffset: string }>`
     font-size: 0.8rem;
   `};
 `
-export const PinIcon = styled(PinSVG)`
+export const PinIcon = styled(PinSVG)<{ top: string }>`
   fill: ${theme('thread.articleDigest')};
   position: absolute;
   ${css.size(18)};
diff --git a/src/components/InlineTags/styles/index.ts b/src/components/InlineTags/styles/index.ts
index 550a9704e..ae5cfa76f 100755
--- a/src/components/InlineTags/styles/index.ts
+++ b/src/components/InlineTags/styles/index.ts
@@ -25,7 +25,7 @@ export const Title = styled.div`
   `};
 `
 export const MoreText = styled.div``
-export const HashSign = styled(HashTagSVG)`
+export const HashSign = styled(HashTagSVG)<{ color: string }>`
   fill: ${({ color }) => color};
   ${css.size(12)};
   transform: rotate(18deg);
diff --git a/src/components/SvgIcons/HashTagSVG.js b/src/components/SvgIcons/HashTagSVG.tsx
similarity index 95%
rename from src/components/SvgIcons/HashTagSVG.js
rename to src/components/SvgIcons/HashTagSVG.tsx
index 94c13a6e0..98459c65a 100644
--- a/src/components/SvgIcons/HashTagSVG.js
+++ b/src/components/SvgIcons/HashTagSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-function SvgComponent(props) {
+const SvgComponent: React.FC = (props) => {
   return (
     <svg
       className="prefix__icon"
diff --git a/src/components/SvgIcons/HeaderMailSVG.js b/src/components/SvgIcons/HeaderMailSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/HeaderMailSVG.js
rename to src/components/SvgIcons/HeaderMailSVG.tsx
index e2a9d7944..92f4cbb9f 100755
--- a/src/components/SvgIcons/HeaderMailSVG.js
+++ b/src/components/SvgIcons/HeaderMailSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/HeaderSearchSVG.js b/src/components/SvgIcons/HeaderSearchSVG.tsx
similarity index 94%
rename from src/components/SvgIcons/HeaderSearchSVG.js
rename to src/components/SvgIcons/HeaderSearchSVG.tsx
index 5e0915f22..dd99c3b31 100755
--- a/src/components/SvgIcons/HeaderSearchSVG.js
+++ b/src/components/SvgIcons/HeaderSearchSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/HeaderStatesSVG.js b/src/components/SvgIcons/HeaderStatesSVG.tsx
similarity index 98%
rename from src/components/SvgIcons/HeaderStatesSVG.js
rename to src/components/SvgIcons/HeaderStatesSVG.tsx
index 8b02336e4..28356ef1c 100755
--- a/src/components/SvgIcons/HeaderStatesSVG.js
+++ b/src/components/SvgIcons/HeaderStatesSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/PinSVG.js b/src/components/SvgIcons/PinSVG.tsx
similarity index 93%
rename from src/components/SvgIcons/PinSVG.js
rename to src/components/SvgIcons/PinSVG.tsx
index 2a5348b3c..09fe09569 100755
--- a/src/components/SvgIcons/PinSVG.js
+++ b/src/components/SvgIcons/PinSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabAISVG.js b/src/components/SvgIcons/TabAISVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabAISVG.js
rename to src/components/SvgIcons/TabAISVG.tsx
index 1cd13e3a8..a8998a72b 100755
--- a/src/components/SvgIcons/TabAISVG.js
+++ b/src/components/SvgIcons/TabAISVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabBackendSVG.js b/src/components/SvgIcons/TabBackendSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabBackendSVG.js
rename to src/components/SvgIcons/TabBackendSVG.tsx
index 3fd0b2438..49f33a803 100755
--- a/src/components/SvgIcons/TabBackendSVG.js
+++ b/src/components/SvgIcons/TabBackendSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabBillingSVG.js b/src/components/SvgIcons/TabBillingSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabBillingSVG.js
rename to src/components/SvgIcons/TabBillingSVG.tsx
index f938189f7..e36a40429 100755
--- a/src/components/SvgIcons/TabBillingSVG.js
+++ b/src/components/SvgIcons/TabBillingSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1367 1024"
diff --git a/src/components/SvgIcons/TabBlockChainSVG.js b/src/components/SvgIcons/TabBlockChainSVG.tsx
similarity index 95%
rename from src/components/SvgIcons/TabBlockChainSVG.js
rename to src/components/SvgIcons/TabBlockChainSVG.tsx
index a473834d4..66a997f94 100755
--- a/src/components/SvgIcons/TabBlockChainSVG.js
+++ b/src/components/SvgIcons/TabBlockChainSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabCheatsheetSVG.js b/src/components/SvgIcons/TabCheatsheetSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabCheatsheetSVG.js
rename to src/components/SvgIcons/TabCheatsheetSVG.tsx
index f1bf25bd3..d9508211b 100755
--- a/src/components/SvgIcons/TabCheatsheetSVG.js
+++ b/src/components/SvgIcons/TabCheatsheetSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabCitySVG.js b/src/components/SvgIcons/TabCitySVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabCitySVG.js
rename to src/components/SvgIcons/TabCitySVG.tsx
index 3f6ef4f99..3e75c6f6c 100755
--- a/src/components/SvgIcons/TabCitySVG.js
+++ b/src/components/SvgIcons/TabCitySVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabCommentsSVG.js b/src/components/SvgIcons/TabCommentsSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabCommentsSVG.js
rename to src/components/SvgIcons/TabCommentsSVG.tsx
index bda875f25..c6b02c2d8 100755
--- a/src/components/SvgIcons/TabCommentsSVG.js
+++ b/src/components/SvgIcons/TabCommentsSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabDesignSVG.js b/src/components/SvgIcons/TabDesignSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabDesignSVG.js
rename to src/components/SvgIcons/TabDesignSVG.tsx
index 4375fc94a..4f16adef4 100755
--- a/src/components/SvgIcons/TabDesignSVG.js
+++ b/src/components/SvgIcons/TabDesignSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1113 1024"
diff --git a/src/components/SvgIcons/TabFavoritesSVG.js b/src/components/SvgIcons/TabFavoritesSVG.tsx
similarity index 93%
rename from src/components/SvgIcons/TabFavoritesSVG.js
rename to src/components/SvgIcons/TabFavoritesSVG.tsx
index a1a4ce071..36038f66d 100755
--- a/src/components/SvgIcons/TabFavoritesSVG.js
+++ b/src/components/SvgIcons/TabFavoritesSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabFrontendSVG.js b/src/components/SvgIcons/TabFrontendSVG.tsx
similarity index 94%
rename from src/components/SvgIcons/TabFrontendSVG.js
rename to src/components/SvgIcons/TabFrontendSVG.tsx
index 47d9b2b1a..f147e38a5 100755
--- a/src/components/SvgIcons/TabFrontendSVG.js
+++ b/src/components/SvgIcons/TabFrontendSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabJobSVG.js b/src/components/SvgIcons/TabJobSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabJobSVG.js
rename to src/components/SvgIcons/TabJobSVG.tsx
index 176d9d582..a458dcf25 100755
--- a/src/components/SvgIcons/TabJobSVG.js
+++ b/src/components/SvgIcons/TabJobSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabLikesSVG.js b/src/components/SvgIcons/TabLikesSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabLikesSVG.js
rename to src/components/SvgIcons/TabLikesSVG.tsx
index 97901309f..b1982ed3f 100755
--- a/src/components/SvgIcons/TabLikesSVG.js
+++ b/src/components/SvgIcons/TabLikesSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1068 1024"
diff --git a/src/components/SvgIcons/TabMobileSVG.js b/src/components/SvgIcons/TabMobileSVG.tsx
similarity index 95%
rename from src/components/SvgIcons/TabMobileSVG.js
rename to src/components/SvgIcons/TabMobileSVG.tsx
index 1156517ff..5feb70fdc 100755
--- a/src/components/SvgIcons/TabMobileSVG.js
+++ b/src/components/SvgIcons/TabMobileSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabPlSVG.js b/src/components/SvgIcons/TabPlSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabPlSVG.js
rename to src/components/SvgIcons/TabPlSVG.tsx
index 2968531d1..e92dce609 100755
--- a/src/components/SvgIcons/TabPlSVG.js
+++ b/src/components/SvgIcons/TabPlSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1152 1024"
diff --git a/src/components/SvgIcons/TabPostSVG.js b/src/components/SvgIcons/TabPostSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabPostSVG.js
rename to src/components/SvgIcons/TabPostSVG.tsx
index c2925a416..7620c48d5 100755
--- a/src/components/SvgIcons/TabPostSVG.js
+++ b/src/components/SvgIcons/TabPostSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabPublishSVG.js b/src/components/SvgIcons/TabPublishSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabPublishSVG.js
rename to src/components/SvgIcons/TabPublishSVG.tsx
index c9b1df919..3d47493bd 100755
--- a/src/components/SvgIcons/TabPublishSVG.js
+++ b/src/components/SvgIcons/TabPublishSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabRadarSVG.js b/src/components/SvgIcons/TabRadarSVG.tsx
similarity index 95%
rename from src/components/SvgIcons/TabRadarSVG.js
rename to src/components/SvgIcons/TabRadarSVG.tsx
index 6ea766d3a..0acfe3fcf 100755
--- a/src/components/SvgIcons/TabRadarSVG.js
+++ b/src/components/SvgIcons/TabRadarSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabRepoSVG.js b/src/components/SvgIcons/TabRepoSVG.tsx
similarity index 92%
rename from src/components/SvgIcons/TabRepoSVG.js
rename to src/components/SvgIcons/TabRepoSVG.tsx
index 0fa9ce8cb..bf41e0ba8 100755
--- a/src/components/SvgIcons/TabRepoSVG.js
+++ b/src/components/SvgIcons/TabRepoSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabSettingsSVG.js b/src/components/SvgIcons/TabSettingsSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabSettingsSVG.js
rename to src/components/SvgIcons/TabSettingsSVG.tsx
index cf200b3cd..c0ea9833f 100755
--- a/src/components/SvgIcons/TabSettingsSVG.js
+++ b/src/components/SvgIcons/TabSettingsSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabShareSVG.js b/src/components/SvgIcons/TabShareSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabShareSVG.js
rename to src/components/SvgIcons/TabShareSVG.tsx
index 7be0af3b1..740def6ff 100755
--- a/src/components/SvgIcons/TabShareSVG.js
+++ b/src/components/SvgIcons/TabShareSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1152 1024"
diff --git a/src/components/SvgIcons/TabTechSVG.js b/src/components/SvgIcons/TabTechSVG.tsx
similarity index 92%
rename from src/components/SvgIcons/TabTechSVG.js
rename to src/components/SvgIcons/TabTechSVG.tsx
index 33ac318ab..9fda2aebc 100755
--- a/src/components/SvgIcons/TabTechSVG.js
+++ b/src/components/SvgIcons/TabTechSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabUserSVG.js b/src/components/SvgIcons/TabUserSVG.tsx
similarity index 97%
rename from src/components/SvgIcons/TabUserSVG.js
rename to src/components/SvgIcons/TabUserSVG.tsx
index 147b34375..ee2c8a36e 100755
--- a/src/components/SvgIcons/TabUserSVG.js
+++ b/src/components/SvgIcons/TabUserSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1219 1024"
diff --git a/src/components/SvgIcons/TabVideoSVG.js b/src/components/SvgIcons/TabVideoSVG.tsx
similarity index 93%
rename from src/components/SvgIcons/TabVideoSVG.js
rename to src/components/SvgIcons/TabVideoSVG.tsx
index 5280c621c..5750dacec 100755
--- a/src/components/SvgIcons/TabVideoSVG.js
+++ b/src/components/SvgIcons/TabVideoSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1024 1024"
diff --git a/src/components/SvgIcons/TabWikiSVG.js b/src/components/SvgIcons/TabWikiSVG.tsx
similarity index 96%
rename from src/components/SvgIcons/TabWikiSVG.js
rename to src/components/SvgIcons/TabWikiSVG.tsx
index 207b44367..24293c396 100755
--- a/src/components/SvgIcons/TabWikiSVG.js
+++ b/src/components/SvgIcons/TabWikiSVG.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-const SvgComponent = (props) => (
+const SvgComponent: React.FC = (props) => (
   <svg
     className="prefix__icon"
     viewBox="0 0 1427 1024"
diff --git a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
index 0ab6a9507..41a50b244 100644
--- a/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
+++ b/src/containers/unit/TagsBar/styles/desktop_view/tag_item.ts
@@ -35,7 +35,8 @@ const getActiveColor = (active, color, activeid) => {
   return !active ? color : '#497684'
 }
 
-export const HashSign = styled(HashTagSVG)`
+type THashSign = TActive & { color: string; activeid: string; inline: boolean }
+export const HashSign = styled(HashTagSVG)<THashSign>`
   fill: ${({ active, color, activeid }) =>
     getActiveColor(active, color, activeid)};
   ${css.size(14)};