You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.5 KiB
39 lines
1.5 KiB
import styled from 'styled-components/macro'
|
|
|
|
import { svgColorStyles } from '../Checkbox/Icon'
|
|
|
|
export const RadioSvg = styled.svg`
|
|
margin-right: 22px;
|
|
|
|
${svgColorStyles}
|
|
`
|
|
|
|
type Props = {
|
|
checked?: boolean,
|
|
}
|
|
|
|
export const Icon = ({ checked }: Props) => {
|
|
const id = checked ? '#radio-checked' : '#radio-unchecked'
|
|
return (
|
|
<RadioSvg
|
|
width='25'
|
|
height='26'
|
|
viewBox='0 0 25 26'
|
|
checked={checked}
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
>
|
|
<use href={id} />
|
|
<defs>
|
|
<path
|
|
id='radio-checked'
|
|
d='M12.375 0.75C19.2095 0.75 24.75 6.29048 24.75 13.125C24.75 19.9595 19.2095 25.5 12.375 25.5C5.54048 25.5 0 19.9595 0 13.125C0 6.29048 5.54048 0.75 12.375 0.75ZM12.375 3C6.78312 3 2.25 7.53312 2.25 13.125C2.25 18.7169 6.78312 23.25 12.375 23.25C17.9669 23.25 22.5 18.7169 22.5 13.125C22.5 7.53312 17.9669 3 12.375 3ZM12.375 5.25C16.7242 5.25 20.25 8.77576 20.25 13.125C20.25 17.4742 16.7242 21 12.375 21C8.02576 21 4.5 17.4742 4.5 13.125C4.5 8.77576 8.02576 5.25 12.375 5.25Z'
|
|
/>
|
|
|
|
<path
|
|
id='radio-unchecked'
|
|
d='M12.375 0C19.2095 0 24.75 5.54048 24.75 12.375C24.75 19.2095 19.2095 24.75 12.375 24.75C5.54048 24.75 0 19.2095 0 12.375C0 5.54048 5.54048 0 12.375 0ZM12.375 2.25C6.78312 2.25 2.25 6.78312 2.25 12.375C2.25 17.9669 6.78312 22.5 12.375 22.5C17.9669 22.5 22.5 17.9669 22.5 12.375C22.5 6.78312 17.9669 2.25 12.375 2.25Z'
|
|
/>
|
|
</defs>
|
|
</RadioSvg>
|
|
)
|
|
}
|
|
|