Added loading, logo, verified_icon icons/components
• Added: - loading, logo, verified_icon icons/components
This commit is contained in:
mgabdev
parent
2f4700e89f
commit
e3581c9848
@ -2,6 +2,10 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CX } from '../constants'
|
||||
|
||||
import Logo from './logo'
|
||||
import Loading from './loading'
|
||||
import VerifiedIcon from './verified_icon'
|
||||
|
||||
class Icon extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
@ -11,6 +15,10 @@ class Icon extends React.PureComponent {
|
||||
size,
|
||||
} = this.props
|
||||
|
||||
if (id === 'logo') return <Logo className={className} />
|
||||
else if (id === 'loading') return <Loading size={size} className={className} />
|
||||
else if (id === 'verified') return <VerifiedIcon size={size} />
|
||||
|
||||
const additionalClasses = {}
|
||||
additionalClasses.gfi = 1
|
||||
additionalClasses[`gfi-${id}`] = 1
|
||||
|
||||
83
app/javascript/gabsocial/components/loading.js
Normal file
83
app/javascript/gabsocial/components/loading.js
Normal file
@ -0,0 +1,83 @@
|
||||
import React from 'react'
|
||||
|
||||
const LoadingIcon = ({
|
||||
className = '',
|
||||
size = '24px',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
style={{shapeRendering: 'auto'}}
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 100 100'
|
||||
preserveAspectRatio='xMidYMid'
|
||||
>
|
||||
<g transform='translate(82,50)'>
|
||||
<g transform='rotate(0)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='1' transform='scale(1.03405 1.03405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-1.029s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-1.029s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(72.627,72.627)'>
|
||||
<g transform='rotate(45)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.882s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.882s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(50,82)'>
|
||||
<g transform='rotate(90)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.7353s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.7353s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(27.3725,72.627)'>
|
||||
<g transform='rotate(135)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.588s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(18,50)'>
|
||||
<g transform='rotate(180)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.441s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.441s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(27.3725,27.3725)'>
|
||||
<g transform='rotate(225)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.294s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.294s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(50,18)'>
|
||||
<g transform='rotate(270)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
|
||||
<animateTransform attributeName='transform' type='scale' begin='-0.147s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='-0.147s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
<g transform='translate(72.627,27.3725)'>
|
||||
<g transform='rotate(315)'>
|
||||
<circle cx='0' cy='0' r='6' className={_s.fillSecondary} 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.176s' repeatCount='indefinite'></animateTransform>
|
||||
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
|
||||
</circle>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default LoadingIcon
|
||||
33
app/javascript/gabsocial/components/logo.js
Normal file
33
app/javascript/gabsocial/components/logo.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
|
||||
const GabLogo = ({
|
||||
className = _s.fillBrand,
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width='50px'
|
||||
height='30px'
|
||||
viewBox='0 0 50 30'
|
||||
xmlSpace='preserve'
|
||||
>
|
||||
<g>
|
||||
<path className={_s.inheritFill} d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
|
||||
c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
|
||||
c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
|
||||
c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/>
|
||||
<path className={_s.inheritFill} d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
|
||||
c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
|
||||
C45.4,12.1,46.2,15.8,43.7,17.5z'/>
|
||||
<path className={_s.inheritFill} d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
|
||||
c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
|
||||
c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
|
||||
c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default GabLogo
|
||||
25
app/javascript/gabsocial/components/verified_icon.js
Normal file
25
app/javascript/gabsocial/components/verified_icon.js
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
|
||||
const VerifiedIcon = ({
|
||||
className = '',
|
||||
size = '24px',
|
||||
}) => (
|
||||
<svg
|
||||
className={className}
|
||||
version='1.1'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
x='0px'
|
||||
y='0px'
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox='0 0 32 32'
|
||||
xmlSpace='preserve'
|
||||
aria-label='Verified Account'
|
||||
>
|
||||
<g>
|
||||
<path fill='#3E99ED' d='M 27.31 4.69 C 24.29 1.66 20.27 0 16 0 C 11.73 0 7.71 1.66 4.69 4.69 C 1.66 7.71 0 11.73 0 16 C 0 20.27 1.66 24.29 4.69 27.31 C 7.71 30.34 11.73 32 16 32 C 20.27 32 24.29 30.34 27.31 27.31 C 30.34 24.29 32 20.27 32 16 C 32 11.73 30.34 7.71 27.31 4.69 Z M 23.64 12.19 L 14.7 21.13 C 14.52 21.32 14.28 21.41 14.04 21.41 C 13.8 21.41 13.56 21.32 13.38 21.13 L 8.36 16.11 C 7.99 15.75 7.99 15.15 8.36 14.79 C 8.72 14.42 9.32 14.42 9.68 14.79 L 14.04 19.14 L 22.32 10.87 C 22.68 10.5 23.28 10.5 23.64 10.87 C 24.01 11.23 24.01 11.82 23.64 12.19 Z M 23.64 12.19' />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default VerifiedIcon
|
||||
Loading…
x
Reference in New Issue
Block a user