From a3670e8fec517127bf3fc0bfc01caa52c84c1f93 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 17 Aug 2020 11:40:39 -0500
Subject: [PATCH] Updated Icon component to be adapted for font instead of svg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
• Updated:
- Icon component to be adapted for font instead of svg
---
app/javascript/gabsocial/components/icon.js | 195 ++------------------
1 file changed, 13 insertions(+), 182 deletions(-)
diff --git a/app/javascript/gabsocial/components/icon.js b/app/javascript/gabsocial/components/icon.js
index 91a243ba..a7362fa8 100644
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -1,196 +1,27 @@
-import AddIcon from '../assets/add_icon'
-import AddImageIcon from '../assets/add_image_icon'
-import AngleRightIcon from '../assets/angle_right_icon'
-import AngleLeftIcon from '../assets/angle_left_icon'
-import AppsIcon from '../assets/apps_icon'
-import ArrowLeftIcon from '../assets/arrow_left_icon'
-import ArrowRightIcon from '../assets/arrow_right_icon'
-import AudioIcon from '../assets/audio_icon'
-import AudioMuteIcon from '../assets/audio_mute_icon'
-import BackIcon from '../assets/back_icon'
-import BlockIcon from '../assets/block_icon'
-import BlockquoteIcon from '../assets/blockquote_icon'
-import BoldIcon from '../assets/bold_icon'
-import BookmarkIcon from '../assets/bookmark_icon'
-import CalendarIcon from '../assets/calendar_icon'
-import CaretDownIcon from '../assets/caret_down_icon'
-import ChatIcon from '../assets/chat_icon'
-import CheckIcon from '../assets/check_icon'
-import CircleIcon from '../assets/circle_icon'
-import CloseIcon from '../assets/close_icon'
-import CodeIcon from '../assets/code_icon'
-import CogIcon from '../assets/cog_icon'
-import CommentIcon from '../assets/comment_icon'
-import CopyIcon from '../assets/copy_icon'
-import DissenterIcon from '../assets/dissenter_icon'
-import EllipsisIcon from '../assets/ellipsis_icon'
-import EmailIcon from '../assets/email_icon'
-import ErrorIcon from '../assets/error_icon'
-import ExploreIcon from '../assets/explore_icon'
-import FullscreenIcon from '../assets/fullscreen_icon'
-import GabLogoIcon from '../assets/gab_logo'
-import GifIcon from '../assets/gif_icon'
-import GlobeIcon from '../assets/globe_icon'
-import GroupIcon from '../assets/group_icon'
-import GroupAddIcon from '../assets/group_add_icon'
-import HappyIcon from '../assets/happy_icon'
-import HiddenIcon from '../assets/hidden_icon'
-import HomeIcon from '../assets/home_icon'
-import InvisibleIcon from '../assets/invisible_icon'
-import ItalicIcon from '../assets/italic_icon'
-import LikeIcon from '../assets/like_icon'
-import LikedIcon from '../assets/liked_icon'
-import LinkIcon from '../assets/link_icon'
-import ListIcon from '../assets/list_icon'
-import ListAddIcon from '../assets/list_add_icon'
-import LoadingIcon from '../assets/loading_icon'
-import LockIcon from '../assets/lock_icon'
-import LockFilledIcon from '../assets/lock_filled_icon'
-import MediaIcon from '../assets/media_icon'
-import MicIcon from '../assets/mic_icon'
-import MinimizeFullscreenIcon from '../assets/minimize_fullscreen_icon'
-import MissingIcon from '../assets/missing_icon'
-import MoreIcon from '../assets/more_icon'
-import NewsIcon from '../assets/news_icon'
-import NotificationsIcon from '../assets/notifications_icon'
-import OLListIcon from '../assets/ol_list_icon'
-import PauseIcon from '../assets/pause_icon'
-import PencilIcon from '../assets/pencil_icon'
-import PinIcon from '../assets/pin_icon'
-import PipIcon from '../assets/pip_icon'
-import PlayIcon from '../assets/play_icon'
-import PollIcon from '../assets/poll_icon'
-import ProIcon from '../assets/pro_icon'
-import QuoteIcon from '../assets/quote_icon'
-import RepostIcon from '../assets/repost_icon'
-import RichTextIcon from '../assets/rich_text_icon'
-import SearchIcon from '../assets/search_icon'
-import SearchAltIcon from '../assets/search_alt_icon'
-import SelectIcon from '../assets/select_icon'
-import ShareIcon from '../assets/share_icon'
-import ShopIcon from '../assets/shop_icon'
-import SortIcon from '../assets/sort_icon'
-import StarIcon from '../assets/star_icon'
-import StarOutlineIcon from '../assets/star_outline_icon'
-import StopWatchIcon from '../assets/stopwatch_icon'
-import StrikethroughIcon from '../assets/strikethrough_icon'
-import SubtractIcon from '../assets/subtract_icon'
-import TextSizeIcon from '../assets/text_size_icon'
-import TrashIcon from '../assets/trash_icon'
-import TrendsIcon from '../assets/trends_icon'
-import ULListIcon from '../assets/ul_list_icon'
-import UnderlineIcon from '../assets/underline_icon'
-import UnlockFilledIcon from '../assets/unlock_filled_icon'
-import VerifiedIcon from '../assets/verified_icon'
-import VisibleIcon from '../assets/visible_icon'
-import WarningIcon from '../assets/warning_icon'
-import WebsiteIcon from '../assets/website_icon'
-
-const ICONS = {
- 'add': AddIcon,
- 'add-image': AddImageIcon,
- 'angle-right': AngleRightIcon,
- 'angle-left': AngleLeftIcon,
- 'apps': AppsIcon,
- 'arrow-left': ArrowLeftIcon,
- 'arrow-right': ArrowRightIcon,
- 'audio': AudioIcon,
- 'audio-mute': AudioMuteIcon,
- 'back': BackIcon,
- 'block': BlockIcon,
- 'blockquote': BlockquoteIcon,
- 'bold': BoldIcon,
- 'bookmark': BookmarkIcon,
- 'calendar': CalendarIcon,
- 'caret-down': CaretDownIcon,
- 'chat': ChatIcon,
- 'check': CheckIcon,
- 'close': CloseIcon,
- 'code': CodeIcon,
- 'cog': CogIcon,
- 'comment': CommentIcon,
- 'copy': CopyIcon,
- 'dissenter': DissenterIcon,
- 'ellipsis': EllipsisIcon,
- 'email': EmailIcon,
- 'error': ErrorIcon,
- 'explore': ExploreIcon,
- 'fullscreen': FullscreenIcon,
- 'logo': GabLogoIcon,
- 'gif': GifIcon,
- 'globe': GlobeIcon,
- 'group': GroupIcon,
- 'group-add': GroupAddIcon,
- 'hidden': HiddenIcon,
- 'happy': HappyIcon,
- 'home': HomeIcon,
- 'invisible': InvisibleIcon,
- 'italic': ItalicIcon,
- 'like': LikeIcon,
- 'liked': LikedIcon,
- 'link': LinkIcon,
- 'list': ListIcon,
- 'list-add': ListAddIcon,
- 'loading': LoadingIcon,
- 'lock': LockIcon,
- 'lock-filled': LockFilledIcon,
- 'media': MediaIcon,
- 'mic': MicIcon,
- 'minimize-fullscreen': MinimizeFullscreenIcon,
- 'missing': MissingIcon,
- 'more': MoreIcon,
- 'news': NewsIcon,
- 'notifications': NotificationsIcon,
- 'ol-list': OLListIcon,
- 'pause': PauseIcon,
- 'pencil': PencilIcon,
- 'pin': PinIcon,
- 'pip': PipIcon,
- 'play': PlayIcon,
- 'poll': PollIcon,
- 'pro': ProIcon,
- 'quote': QuoteIcon,
- 'repost': RepostIcon,
- 'rich-text': RichTextIcon,
- 'search': SearchIcon,
- 'search-alt': SearchAltIcon,
- 'select': SelectIcon,
- 'share': ShareIcon,
- 'shop': ShopIcon,
- 'sort': SortIcon,
- 'star': StarIcon,
- 'star-outline': StarOutlineIcon,
- 'stopwatch': StopWatchIcon,
- 'strikethrough': StrikethroughIcon,
- 'subtract': SubtractIcon,
- 'text-size': TextSizeIcon,
- 'trash': TrashIcon,
- 'trends': TrendsIcon,
- 'ul-list': ULListIcon,
- 'underline': UnderlineIcon,
- 'unlock-filled': UnlockFilledIcon,
- 'verified': VerifiedIcon,
- 'visible': VisibleIcon,
- 'warning': WarningIcon,
- 'website': WebsiteIcon,
- '': CircleIcon,
-}
+import { CX } from '../constants'
export default class Icon extends PureComponent {
static propTypes = {
- id: PropTypes.string.isRequired,
className: PropTypes.string,
+ id: PropTypes.string.isRequired,
size: PropTypes.string,
}
render() {
- const { id, size, className } = this.props
+ const {
+ className,
+ id,
+ size,
+ } = this.props
- // : todo : add all required icons
- const Asset = ICONS[id] || CircleIcon
+ const additionalClasses = {}
+ additionalClasses.gfi = 1
+ additionalClasses[`gfi-${id}`] = 1
+
+ const classes = CX(className, additionalClasses)
- return
+ return
}