Progress
This commit is contained in:
mgabdev
@@ -1,19 +1,26 @@
|
||||
import AppsIcon from './svgs/apps_icon'
|
||||
import BackIcon from './svgs/back_icon'
|
||||
import CalendarIcon from './svgs/calendar_icon'
|
||||
import ChatIcon from './svgs/chat_icon'
|
||||
import CloseIcon from './svgs/close_icon'
|
||||
import CommentIcon from './svgs/comment_icon'
|
||||
import DissenterIcon from './svgs/dissenter_icon'
|
||||
import EllipsisIcon from './svgs/ellipsis_icon'
|
||||
import GlobeIcon from './svgs/globe_icon'
|
||||
import GroupIcon from './svgs/group_icon'
|
||||
import HomeIcon from './svgs/home_icon'
|
||||
import LikeIcon from './svgs/like_icon'
|
||||
import ListIcon from './svgs/list_icon'
|
||||
import LoadingIcon from './svgs/loading_icon'
|
||||
import MediaIcon from './svgs/media_icon'
|
||||
import MoreIcon from './svgs/more_icon'
|
||||
import NotificationsIcon from './svgs/notifications_icon'
|
||||
import PollIcon from './svgs/poll_icon'
|
||||
import RepostIcon from './svgs/repost_icon'
|
||||
import SearchIcon from './svgs/search_icon'
|
||||
import ShareIcon from './svgs/share_icon'
|
||||
import ShopIcon from './svgs/shop_icon'
|
||||
import TrendsIcon from './svgs/trends_icon'
|
||||
import VerifiedIcon from './svgs/verified_icon'
|
||||
import WarningIcon from './svgs/warning_icon'
|
||||
|
||||
@@ -30,14 +37,20 @@ export default class Icon extends PureComponent {
|
||||
const { id, ...options } = this.props
|
||||
|
||||
switch (id) {
|
||||
case 'apps':
|
||||
return <AppsIcon {...options} />
|
||||
case 'back':
|
||||
return <BackIcon {...options} />
|
||||
case 'calendar':
|
||||
return <CalendarIcon {...options} />
|
||||
case 'chat':
|
||||
return <ChatIcon {...options} />
|
||||
case 'close':
|
||||
return <CloseIcon {...options} />
|
||||
case 'comment':
|
||||
return <CommentIcon {...options} />
|
||||
case 'dissenter':
|
||||
return <DissenterIcon {...options} />
|
||||
case 'ellipsis':
|
||||
return <EllipsisIcon {...options} />
|
||||
case 'globe':
|
||||
@@ -48,8 +61,12 @@ export default class Icon extends PureComponent {
|
||||
return <HomeIcon {...options} />
|
||||
case 'like':
|
||||
return <LikeIcon {...options} />
|
||||
case 'list':
|
||||
return <ListIcon {...options} />
|
||||
case 'loading':
|
||||
return <LoadingIcon {...options} />
|
||||
case 'more':
|
||||
return <MoreIcon {...options} />
|
||||
case 'media':
|
||||
return <MediaIcon {...options} />
|
||||
case 'notifications':
|
||||
@@ -62,10 +79,14 @@ export default class Icon extends PureComponent {
|
||||
return <SearchIcon {...options} />
|
||||
case 'share':
|
||||
return <ShareIcon {...options} />
|
||||
case 'shop':
|
||||
return <ShopIcon {...options} />
|
||||
case 'trends':
|
||||
return <TrendsIcon {...options} />
|
||||
case 'verified':
|
||||
return <VerifiedIcon {...options} />
|
||||
case 'warning':
|
||||
return <WarningIcon {...options} />
|
||||
return <WarningIcon {...options} />
|
||||
default:
|
||||
return <NotificationsIcon {...options} />
|
||||
}
|
||||
|
||||
35
app/javascript/gabsocial/components/icon/svgs/apps_icon.js
Normal file
35
app/javascript/gabsocial/components/icon/svgs/apps_icon.js
Normal file
@@ -0,0 +1,35 @@
|
||||
const AppsIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 80 80',
|
||||
title = 'Apps',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<rect x="0" y="0" width="24" height="24" rx="4" />
|
||||
<rect x="0" y="28" width="24" height="24" rx="4" />
|
||||
<rect x="0" y="56" width="24" height="24" rx="4" />
|
||||
<rect x="28" y="0" width="24" height="24" rx="4" />
|
||||
<rect x="28" y="28" width="24" height="24" rx="4" />
|
||||
<rect x="28" y="56" width="24" height="24" rx="4" />
|
||||
<rect x="56" y="0" width="24" height="24" rx="4" />
|
||||
<rect x="56" y="28" width="24" height="24" rx="4" />
|
||||
<rect x="56" y="56" width="24" height="24" rx="4" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
)
|
||||
|
||||
export default AppsIcon
|
||||
27
app/javascript/gabsocial/components/icon/svgs/chat_icon.js
Normal file
27
app/javascript/gabsocial/components/icon/svgs/chat_icon.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const ChatIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Chat',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 53.582 59.804 L 47.851 55.964 C 39.121 57.57 30.07 54.253 25.582 48.0625 C 23.726 45.453 22.75 42.496 22.75 39.5 C 22.75 30.195 32 22.625 43.375 22.625 C 47.765 22.625 51.972 23.738 55.542 25.847 C 60.839 29.019 64 34.121 64 39.5 C 64 44.527 61.218 49.328 56.5 52.527 L 56.5 58.25 C 56.5 59.761 54.812 60.636 53.582 59.804 Z M 53.582 59.804" />
|
||||
<path d="M 19 39.5 C 19 28.128 29.933 18.875 43.375 18.875 C 47.839 18.875 52.125 19.937 55.929 21.859 C 53.308 11.609 41.953 3.875 28.375 3.875 C 12.867 3.875 0 13.96 0 26.375 C 0 32.132 2.906 37.539 7.75 41.695 L 7.75 50.75 C 7.75 52.257 9.429 53.132 10.664 52.308 L 18.121 47.339 C 19.132 47.652344 20.175 47.859 21.218 48.074 C 19.773 45.375 19 42.464 19 39.5 Z M 19 39.5" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ChatIcon
|
||||
@@ -0,0 +1,29 @@
|
||||
const DissenterIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Dissenter',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 33.519531 4.734375 L 8.007812 4.734375 C 4.800781 4.734375 2.175781 7.359375 2.175781 10.566406 L 2.175781 53.5625 C 2.175781 56.769531 4.800781 59.390625 8.007812 59.390625 L 33.519531 59.390625 C 52.011719 59.390625 61.953125 46.503906 61.953125 32.0625 C 61.953125 17.625 52.550781 4.734375 33.519531 4.734375" />
|
||||
<path fill='#F6F6F9' d="M 41.761719 24.574219 L 17.757812 24.574219 C 16.925781 24.574219 16.257812 23.886719 16.257812 23.039062 C 16.257812 22.191406 16.925781 21.503906 17.757812 21.503906 L 41.761719 21.503906 C 42.59375 21.503906 43.265625 22.191406 43.265625 23.039062 C 43.265625 23.886719 42.59375 24.574219 41.761719 24.574219" />
|
||||
<path fill='#F6F6F9' d="M 41.761719 33.535156 L 17.757812 33.535156 C 16.925781 33.535156 16.257812 32.847656 16.257812 32 C 16.257812 31.152344 16.925781 30.464844 17.757812 30.464844 L 41.761719 30.464844 C 42.59375 30.464844 43.265625 31.152344 43.265625 32 C 43.265625 32.847656 42.59375 33.535156 41.761719 33.535156" />
|
||||
<path fill='#F6F6F9' d="M 17.765625 42.625 C 16.929688 42.625 16.257812 41.9375 16.257812 41.089844 C 16.257812 40.238281 16.929688 39.550781 17.765625 39.550781 L 33.820312 39.550781 C 34.652344 39.550781 35.328125 40.238281 35.328125 41.089844 C 35.328125 41.9375 34.652344 42.625 33.820312 42.625 Z M 17.765625 42.625" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default DissenterIcon
|
||||
26
app/javascript/gabsocial/components/icon/svgs/list_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/list_icon.js
Normal file
@@ -0,0 +1,26 @@
|
||||
const ListIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'List',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 57.144 0 L 6.855 0 C 3.07 0 0 3.023 0 6.75 L 0 56.25 C 0 59.976 3.07 63 6.855 63 L 57.144 63 C 60.929 63 64 59.976562 64 56.25 L 64 6.75 C 64 3.023438 60.929688 0 57.144531 0 Z M 20.570312 49.5 L 13.714844 49.5 C 12.453125 49.5 11.429688 48.492188 11.429688 47.25 C 11.429688 46.007812 12.453125 45 13.714844 45 L 20.570312 45 C 21.832031 45 22.855469 46.007812 22.855469 47.25 C 22.855469 48.492188 21.832031 49.5 20.570312 49.5 Z M 20.570312 33.75 L 13.714844 33.75 C 12.453125 33.75 11.429688 32.742188 11.429688 31.5 C 11.429688 30.257812 12.453125 29.25 13.714844 29.25 L 20.570312 29.25 C 21.832031 29.25 22.855469 30.257812 22.855469 31.5 C 22.855469 32.742188 21.832031 33.75 20.570312 33.75 Z M 20.570312 18 L 13.714844 18 C 12.453125 18 11.429688 16.992188 11.429688 15.75 C 11.429688 14.507812 12.453125 13.5 13.714844 13.5 L 20.570312 13.5 C 21.832031 13.5 22.855469 14.507812 22.855469 15.75 C 22.855469 16.992188 21.832031 18 20.570312 18 Z M 50.285156 49.5 L 29.714844 49.5 C 28.453125 49.5 27.429688 48.492188 27.429688 47.25 C 27.429688 46.007812 28.453125 45 29.714844 45 L 50.285156 45 C 51.546875 45 52.570312 46.007812 52.570312 47.25 C 52.570312 48.492188 51.546875 49.5 50.285156 49.5 Z M 50.285156 33.75 L 29.714844 33.75 C 28.453125 33.75 27.429688 32.742188 27.429688 31.5 C 27.429688 30.257812 28.453125 29.25 29.714844 29.25 L 50.285156 29.25 C 51.546875 29.25 52.570312 30.257812 52.570312 31.5 C 52.570312 32.742188 51.546875 33.75 50.285156 33.75 Z M 50.285156 18 L 29.714844 18 C 28.453125 18 27.429688 16.992188 27.429688 15.75 C 27.429688 14.507812 28.453125 13.5 29.714844 13.5 L 50.285156 13.5 C 51.546875 13.5 52.570312 14.507812 52.570312 15.75 C 52.570312 16.992188 51.546875 18 50.285156 18 Z M 50.285156 18 "/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ListIcon
|
||||
27
app/javascript/gabsocial/components/icon/svgs/more_icon.js
Normal file
27
app/javascript/gabsocial/components/icon/svgs/more_icon.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const MoreIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'More',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 32 0 C 14.355 0 0 14.355 0 32 C 0 49.644 14.355 64 32 64 C 49.644 64 64 49.644 64 32 C 64 14.355 49.644 0 32 0 Z M 16.484 36.847 C 13.812 36.847 11.636 34.671 11.636 32 C 11.636 29.328 13.812 27.152 16.484 27.152 C 19.16 27.152 21.332 29.328 21.332 32 C 21.332 34.671 19.16 36.847 16.484 36.847 Z M 32 36.847 C 29.328 36.847 27.152 34.671 27.152 32 C 27.152 29.328 29.328 27.152 32 27.152 C 34.671 27.152 36.847 29.328 36.847 32 C 36.847 34.671 34.671 36.847 32 36.847 Z M 47.515 36.847 C 44.839 36.847 42.667 34.671 42.667 32 C 42.667 29.328 44.839 27.152 47.515 27.152 C 50.187 27.152 52.363 29.328 52.363 32 C 52.363 34.671 50.187 36.847 47.515 36.847 Z M 47.515 36.847" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
)
|
||||
|
||||
export default MoreIcon
|
||||
27
app/javascript/gabsocial/components/icon/svgs/shop_icon.js
Normal file
27
app/javascript/gabsocial/components/icon/svgs/shop_icon.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const ShopIcon = ({
|
||||
className = '',
|
||||
width = '26px',
|
||||
height = '26px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Shop',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 49.921875 3.40625 L 30.269531 3.40625 C 29.027344 3.40625 27.832031 3.902344 26.953125 4.78125 L 1.375 30.355469 C -0.457031 32.1875 -0.457031 35.15625 1.375 36.992188 L 21.023438 56.644531 C 22.859375 58.476562 25.828125 58.476562 27.660156 56.644531 L 53.238281 31.070312 C 54.117188 30.1875 54.613281 28.992188 54.613281 27.746094 L 54.613281 8.097656 C 54.613281 5.507812 52.511719 3.40625 49.921875 3.40625 Z M 41.707031 19.832031 C 39.765625 19.832031 38.1875 18.253906 38.1875 16.3125 C 38.1875 14.371094 39.765625 12.792969 41.707031 12.792969 C 43.652344 12.792969 45.226562 14.371094 45.226562 16.3125 C 45.226562 18.253906 43.652344 19.832031 41.707031 19.832031 Z M 41.707031 19.832031" />
|
||||
<path d="M 59.308594 8.097656 L 59.304688 29.945312 C 59.304688 31.023438 58.875 32.066406 58.109375 32.828125 L 32.117188 58.820312 L 32.515625 59.21875 C 34.347656 61.050781 37.320312 61.050781 39.152344 59.21875 L 62.621094 35.753906 C 63.503906 34.875 64 33.679688 64 32.4375 L 64 12.792969 C 64 10.199219 61.898438 8.097656 59.308594 8.097656 Z M 59.308594 8.097656" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default ShopIcon
|
||||
32
app/javascript/gabsocial/components/icon/svgs/trends_icon.js
Normal file
32
app/javascript/gabsocial/components/icon/svgs/trends_icon.js
Normal file
@@ -0,0 +1,32 @@
|
||||
const TrendsIcon = ({
|
||||
className = '',
|
||||
width = '32px',
|
||||
height = '32px',
|
||||
viewBox = '0 0 80 80',
|
||||
title = 'Trends',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
xmlSpace='preserve'
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<rect x="0" y="0" width="24" height="56" rx="4" />
|
||||
<rect x="0" y="60" width="24" height="20" rx="4" />
|
||||
<rect x="28" y="44" width="24" height="36" rx="4" />
|
||||
<rect x="28" y="16" width="24" height="24" rx="4" />
|
||||
<rect x="56" y="64" width="24" height="16" rx="4" />
|
||||
<rect x="56" y="30" width="24" height="30" rx="4" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
)
|
||||
|
||||
export default TrendsIcon
|
||||
Reference in New Issue
Block a user