Progress
This commit is contained in:
mgabdev
@@ -1,4 +1,6 @@
|
||||
import AddIcon from './svgs/add_icon'
|
||||
import AppsIcon from './svgs/apps_icon'
|
||||
import AngleRightIcon from './svgs/angle_right_icon'
|
||||
import BackIcon from './svgs/back_icon'
|
||||
import CalendarIcon from './svgs/calendar_icon'
|
||||
import ChatIcon from './svgs/chat_icon'
|
||||
@@ -20,6 +22,7 @@ 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 SubtractIcon from './svgs/subtract_icon'
|
||||
import TrendsIcon from './svgs/trends_icon'
|
||||
import VerifiedIcon from './svgs/verified_icon'
|
||||
import WarningIcon from './svgs/warning_icon'
|
||||
@@ -37,8 +40,12 @@ export default class Icon extends PureComponent {
|
||||
const { id, ...options } = this.props
|
||||
|
||||
switch (id) {
|
||||
case 'add':
|
||||
return <AddIcon {...options} />
|
||||
case 'apps':
|
||||
return <AppsIcon {...options} />
|
||||
case 'angle-right':
|
||||
return <AngleRightIcon {...options} />
|
||||
case 'back':
|
||||
return <BackIcon {...options} />
|
||||
case 'calendar':
|
||||
@@ -81,6 +88,8 @@ export default class Icon extends PureComponent {
|
||||
return <ShareIcon {...options} />
|
||||
case 'shop':
|
||||
return <ShopIcon {...options} />
|
||||
case 'subtract':
|
||||
return <SubtractIcon {...options} />
|
||||
case 'trends':
|
||||
return <TrendsIcon {...options} />
|
||||
case 'verified':
|
||||
|
||||
26
app/javascript/gabsocial/components/icon/svgs/add_icon.js
Normal file
26
app/javascript/gabsocial/components/icon/svgs/add_icon.js
Normal file
@@ -0,0 +1,26 @@
|
||||
const AddIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Add',
|
||||
}) => (
|
||||
<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 61.5 29.5 L 34.5 29.5 L 34.5 2.5 C 34.5 1.121094 33.378906 0 32 0 C 30.621094 0 29.5 1.121094 29.5 2.5 L 29.5 29.5 L 2.5 29.5 C 1.121094 29.5 0 30.621094 0 32 C 0 33.378906 1.121094 34.5 2.5 34.5 L 29.5 34.5 L 29.5 61.5 C 29.5 62.878906 30.621094 64 32 64 C 33.378906 64 34.5 62.878906 34.5 61.5 L 34.5 34.5 L 61.5 34.5 C 62.878906 34.5 64 33.378906 64 32 C 64 30.621094 62.878906 29.5 61.5 29.5 Z M 61.5 29.5" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default AddIcon
|
||||
@@ -0,0 +1,26 @@
|
||||
const AngleRightIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = '',
|
||||
}) => (
|
||||
<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.777344 29.503906 L 21.296875 1.023438 C 20.640625 0.363281 19.761719 0 18.824219 0 C 17.882812 0 17.003906 0.363281 16.347656 1.023438 L 14.25 3.121094 C 12.882812 4.484375 12.882812 6.707031 14.25 8.070312 L 38.164062 31.988281 L 14.222656 55.929688 C 13.5625 56.589844 13.199219 57.46875 13.199219 58.40625 C 13.199219 59.34375 13.5625 60.222656 14.222656 60.882812 L 16.320312 62.976562 C 16.980469 63.636719 17.859375 64 18.796875 64 C 19.734375 64 20.613281 63.636719 21.273438 62.976562 L 49.777344 34.472656 C 50.4375 33.808594 50.800781 32.925781 50.800781 31.988281 C 50.800781 31.046875 50.4375 30.164062 49.777344 29.503906 Z M 49.777344 29.503906" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default AngleRightIcon
|
||||
@@ -18,7 +18,7 @@ const BackIcon = ({
|
||||
aria-label={title}
|
||||
>
|
||||
<g>
|
||||
<path d="M 19.570312 9.542969 C 20.417969 8.695312 21.75 8.695312 22.59375 9.542969 C 23.410156 10.359375 23.410156 11.71875 22.59375 12.535156 L 7.265625 27.867188 L 57.851562 27.867188 C 59.03125 27.867188 60 28.804688 60 29.984375 C 60 31.164062 59.03125 32.128906 57.851562 32.128906 L 7.265625 32.128906 L 22.59375 47.433594 C 23.410156 48.277344 23.410156 49.640625 22.59375 50.457031 C 21.75 51.300781 20.417969 51.300781 19.570312 50.457031 L 0.613281 31.496094 C -0.207031 30.679688 -0.207031 29.316406 0.613281 28.503906 Z M 19.570312 9.542969" />
|
||||
<path d="M 56.394531 25.789062 C 56.148438 25.75 55.898438 25.730469 55.652344 25.734375 L 13.324219 25.734375 L 14.246094 25.304688 C 15.148438 24.878906 15.96875 24.296875 16.671875 23.585938 L 28.539062 11.71875 C 30.105469 10.226562 30.367188 7.824219 29.164062 6.027344 C 27.761719 4.117188 25.078125 3.699219 23.164062 5.101562 C 23.007812 5.214844 22.863281 5.339844 22.722656 5.472656 L 1.257812 26.9375 C -0.417969 28.609375 -0.417969 31.328125 1.253906 33.007812 C 1.257812 33.007812 1.257812 33.007812 1.257812 33.011719 L 22.722656 54.476562 C 24.402344 56.148438 27.121094 56.144531 28.796875 54.464844 C 28.925781 54.335938 29.050781 54.195312 29.164062 54.046875 C 30.367188 52.25 30.105469 49.851562 28.539062 48.359375 L 16.691406 36.464844 C 16.0625 35.835938 15.339844 35.308594 14.546875 34.898438 L 13.257812 34.320312 L 55.414062 34.320312 C 57.609375 34.402344 59.53125 32.867188 59.945312 30.714844 C 60.324219 28.371094 58.734375 26.167969 56.394531 25.789062 Z M 56.394531 25.789062" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@@ -15,7 +15,7 @@ const LoadingIcon = ({
|
||||
>
|
||||
<g transform='translate(82,50)'>
|
||||
<g transform='rotate(0)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='1' transform='scale(1.03405 1.03405)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='1' transform='scale(1.03405 1.03405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-1.0294117647058822s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate>
|
||||
</circle>
|
||||
@@ -23,7 +23,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(72.62741699796952,72.62741699796952)'>
|
||||
<g transform='rotate(45)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.875' transform='scale(1.09655 1.09655)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.8823529411764705s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate>
|
||||
</circle>
|
||||
@@ -31,7 +31,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(50,82)'>
|
||||
<g transform='rotate(90)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.75' transform='scale(1.15905 1.15905)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.7352941176470588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate>
|
||||
</circle>
|
||||
@@ -39,7 +39,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(27.37258300203048,72.62741699796952)'>
|
||||
<g transform='rotate(135)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.625' transform='scale(1.22155 1.22155)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.588235294117647s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate>
|
||||
</circle>
|
||||
@@ -47,7 +47,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(18,50)'>
|
||||
<g transform='rotate(180)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.5' transform='scale(1.28405 1.28405)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.4411764705882352s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate>
|
||||
</circle>
|
||||
@@ -55,7 +55,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(27.372583002030474,27.37258300203048)'>
|
||||
<g transform='rotate(225)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.375' transform='scale(1.34655 1.34655)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.2941176470588235s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate>
|
||||
</circle>
|
||||
@@ -63,7 +63,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(50,18)'>
|
||||
<g transform='rotate(270)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.25' transform='scale(1.40905 1.40905)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.14705882352941174s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate>
|
||||
</circle>
|
||||
@@ -71,7 +71,7 @@ const LoadingIcon = ({
|
||||
</g>
|
||||
<g transform='translate(72.62741699796952,27.372583002030474)'>
|
||||
<g transform='rotate(315)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fill-opacity='0.125' transform='scale(1.47155 1.47155)'>
|
||||
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.125' transform='scale(1.47155 1.47155)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
|
||||
</circle>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
const SubtractIcon = ({
|
||||
className = '',
|
||||
width = '16px',
|
||||
height = '16px',
|
||||
viewBox = '0 0 64 64',
|
||||
title = 'Subtract',
|
||||
}) => (
|
||||
<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 61.5 29.5 L 2.5 29.5 C 1.121094 29.5 0 30.621094 0 32 C 0 33.378906 1.121094 34.5 2.5 34.5 L 61.5 34.5 C 62.878906 34.5 64 33.378906 64 32 C 64 30.621094 62.878906 29.5 61.5 29.5 Z M 61.5 29.5" />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default SubtractIcon
|
||||
Reference in New Issue
Block a user