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 }