Skip to content

Commit

Permalink
Add CircleProgressFilled and CircleOutline icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@josuefarfan
josuefarfan committed Dec 17, 2020
1 parent 5d19040 commit d01f5b8
Show file tree
Hide file tree
Showing 2 changed files with 224 additions and 0 deletions.
176 changes: 176 additions & 0 deletions src/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -720,6 +720,50 @@ exports[`With className array Icon CheckCircleOutline 1`] = `
</div>
`;

exports[`With className array Icon CircleOutline 1`] = `
<div>
<svg
class="w-4 text-black fill-current"
height="24px"
viewBox="0 0 24 24"
width="24px"
>
<path
d="M0 12C0 5.37187 5.37187 0 12 0C18.6281 0 24 5.37187 24 12C24 18.6281 18.6281 24 12 24C5.37187 24 0 18.6281 0 12ZM16.0125 21.5016C17.2406 20.9836 18.3445 20.2383 19.2914 19.2914C20.2406 18.3445 20.9836 17.2406 21.5039 16.0125C22.0406 14.7422 22.3125 13.3922 22.3125 12C22.3125 10.6078 22.0406 9.25781 21.5016 7.98516C20.9836 6.75703 20.2383 5.65312 19.2914 4.70625C18.3422 3.75938 17.2406 3.01641 16.0125 2.49609C14.7422 1.95938 13.3922 1.6875 12 1.6875C10.6078 1.6875 9.25781 1.95938 7.98516 2.49844C6.75703 3.01641 5.65312 3.76172 4.70625 4.70859C3.75938 5.65781 3.01641 6.75938 2.49609 7.9875C1.95938 9.25781 1.6875 10.6078 1.6875 12C1.6875 13.3922 1.95938 14.7422 2.49844 16.0148C3.01641 17.243 3.76172 18.3469 4.70859 19.2938C5.65781 20.2406 6.75938 20.9836 7.9875 21.5039C9.25781 22.0406 10.6078 22.3125 12 22.3125C13.3922 22.3125 14.7422 22.0406 16.0125 21.5016Z"
fill="currentColor"
/>
</svg>
</div>
`;

exports[`With className array Icon CircleProgressFilled 1`] = `
<div>
<svg
class="w-4 text-black fill-current"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0C5.37187 0 0 5.37187 0 12C0 18.6281 5.37187 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37187 18.6281 0 12 0Z"
fill="currentColor"
/>
<path
d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
fill="white"
/>
<path
d="M18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10Z"
fill="white"
/>
<path
d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z"
fill="white"
/>
</svg>
</div>
`;

exports[`With className array Icon Clock 1`] = `
<div>
<svg
Expand Down Expand Up @@ -2666,6 +2710,50 @@ exports[`With className object Icon CheckCircleOutline 1`] = `
</div>
`;

exports[`With className object Icon CircleOutline 1`] = `
<div>
<svg
class="w-4 fill-current"
height="24px"
viewBox="0 0 24 24"
width="24px"
>
<path
d="M0 12C0 5.37187 5.37187 0 12 0C18.6281 0 24 5.37187 24 12C24 18.6281 18.6281 24 12 24C5.37187 24 0 18.6281 0 12ZM16.0125 21.5016C17.2406 20.9836 18.3445 20.2383 19.2914 19.2914C20.2406 18.3445 20.9836 17.2406 21.5039 16.0125C22.0406 14.7422 22.3125 13.3922 22.3125 12C22.3125 10.6078 22.0406 9.25781 21.5016 7.98516C20.9836 6.75703 20.2383 5.65312 19.2914 4.70625C18.3422 3.75938 17.2406 3.01641 16.0125 2.49609C14.7422 1.95938 13.3922 1.6875 12 1.6875C10.6078 1.6875 9.25781 1.95938 7.98516 2.49844C6.75703 3.01641 5.65312 3.76172 4.70625 4.70859C3.75938 5.65781 3.01641 6.75938 2.49609 7.9875C1.95938 9.25781 1.6875 10.6078 1.6875 12C1.6875 13.3922 1.95938 14.7422 2.49844 16.0148C3.01641 17.243 3.76172 18.3469 4.70859 19.2938C5.65781 20.2406 6.75938 20.9836 7.9875 21.5039C9.25781 22.0406 10.6078 22.3125 12 22.3125C13.3922 22.3125 14.7422 22.0406 16.0125 21.5016Z"
fill="currentColor"
/>
</svg>
</div>
`;

exports[`With className object Icon CircleProgressFilled 1`] = `
<div>
<svg
class="w-4 fill-current"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0C5.37187 0 0 5.37187 0 12C0 18.6281 5.37187 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37187 18.6281 0 12 0Z"
fill="currentColor"
/>
<path
d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
fill="white"
/>
<path
d="M18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10Z"
fill="white"
/>
<path
d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z"
fill="white"
/>
</svg>
</div>
`;

exports[`With className object Icon Clock 1`] = `
<div>
<svg
Expand Down Expand Up @@ -4612,6 +4700,50 @@ exports[`With className string Icon CheckCircleOutline 1`] = `
</div>
`;

exports[`With className string Icon CircleOutline 1`] = `
<div>
<svg
class="w-4 h-4 fill-current"
height="24px"
viewBox="0 0 24 24"
width="24px"
>
<path
d="M0 12C0 5.37187 5.37187 0 12 0C18.6281 0 24 5.37187 24 12C24 18.6281 18.6281 24 12 24C5.37187 24 0 18.6281 0 12ZM16.0125 21.5016C17.2406 20.9836 18.3445 20.2383 19.2914 19.2914C20.2406 18.3445 20.9836 17.2406 21.5039 16.0125C22.0406 14.7422 22.3125 13.3922 22.3125 12C22.3125 10.6078 22.0406 9.25781 21.5016 7.98516C20.9836 6.75703 20.2383 5.65312 19.2914 4.70625C18.3422 3.75938 17.2406 3.01641 16.0125 2.49609C14.7422 1.95938 13.3922 1.6875 12 1.6875C10.6078 1.6875 9.25781 1.95938 7.98516 2.49844C6.75703 3.01641 5.65312 3.76172 4.70625 4.70859C3.75938 5.65781 3.01641 6.75938 2.49609 7.9875C1.95938 9.25781 1.6875 10.6078 1.6875 12C1.6875 13.3922 1.95938 14.7422 2.49844 16.0148C3.01641 17.243 3.76172 18.3469 4.70859 19.2938C5.65781 20.2406 6.75938 20.9836 7.9875 21.5039C9.25781 22.0406 10.6078 22.3125 12 22.3125C13.3922 22.3125 14.7422 22.0406 16.0125 21.5016Z"
fill="currentColor"
/>
</svg>
</div>
`;

exports[`With className string Icon CircleProgressFilled 1`] = `
<div>
<svg
class="w-4 h-4 fill-current"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0C5.37187 0 0 5.37187 0 12C0 18.6281 5.37187 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37187 18.6281 0 12 0Z"
fill="currentColor"
/>
<path
d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
fill="white"
/>
<path
d="M18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10Z"
fill="white"
/>
<path
d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z"
fill="white"
/>
</svg>
</div>
`;

exports[`With className string Icon Clock 1`] = `
<div>
<svg
Expand Down Expand Up @@ -6558,6 +6690,50 @@ exports[`Without className Icon CheckCircleOutline 1`] = `
</div>
`;

exports[`Without className Icon CircleOutline 1`] = `
<div>
<svg
class="fill-current"
height="24px"
viewBox="0 0 24 24"
width="24px"
>
<path
d="M0 12C0 5.37187 5.37187 0 12 0C18.6281 0 24 5.37187 24 12C24 18.6281 18.6281 24 12 24C5.37187 24 0 18.6281 0 12ZM16.0125 21.5016C17.2406 20.9836 18.3445 20.2383 19.2914 19.2914C20.2406 18.3445 20.9836 17.2406 21.5039 16.0125C22.0406 14.7422 22.3125 13.3922 22.3125 12C22.3125 10.6078 22.0406 9.25781 21.5016 7.98516C20.9836 6.75703 20.2383 5.65312 19.2914 4.70625C18.3422 3.75938 17.2406 3.01641 16.0125 2.49609C14.7422 1.95938 13.3922 1.6875 12 1.6875C10.6078 1.6875 9.25781 1.95938 7.98516 2.49844C6.75703 3.01641 5.65312 3.76172 4.70625 4.70859C3.75938 5.65781 3.01641 6.75938 2.49609 7.9875C1.95938 9.25781 1.6875 10.6078 1.6875 12C1.6875 13.3922 1.95938 14.7422 2.49844 16.0148C3.01641 17.243 3.76172 18.3469 4.70859 19.2938C5.65781 20.2406 6.75938 20.9836 7.9875 21.5039C9.25781 22.0406 10.6078 22.3125 12 22.3125C13.3922 22.3125 14.7422 22.0406 16.0125 21.5016Z"
fill="currentColor"
/>
</svg>
</div>
`;

exports[`Without className Icon CircleProgressFilled 1`] = `
<div>
<svg
class="fill-current"
height="24"
viewBox="0 0 24 24"
width="24"
>
<path
d="M12 0C5.37187 0 0 5.37187 0 12C0 18.6281 5.37187 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37187 18.6281 0 12 0Z"
fill="currentColor"
/>
<path
d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
fill="white"
/>
<path
d="M18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10Z"
fill="white"
/>
<path
d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z"
fill="white"
/>
</svg>
</div>
`;

exports[`Without className Icon Clock 1`] = `
<div>
<svg
Expand Down
48 changes: 48 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1701,3 +1701,51 @@ export function Markdown(props: BaseProps): JSX.Element {
</svg>
);
}

export function CircleOutline(props: BaseProps): JSX.Element {
const className = cx(props.className, 'fill-current');
return (
<svg
width="24px"
height="24px"
viewBox="0 0 24 24"
{...props}
className={className}
>
<path
d="M0 12C0 5.37187 5.37187 0 12 0C18.6281 0 24 5.37187 24 12C24 18.6281 18.6281 24 12 24C5.37187 24 0 18.6281 0 12ZM16.0125 21.5016C17.2406 20.9836 18.3445 20.2383 19.2914 19.2914C20.2406 18.3445 20.9836 17.2406 21.5039 16.0125C22.0406 14.7422 22.3125 13.3922 22.3125 12C22.3125 10.6078 22.0406 9.25781 21.5016 7.98516C20.9836 6.75703 20.2383 5.65312 19.2914 4.70625C18.3422 3.75938 17.2406 3.01641 16.0125 2.49609C14.7422 1.95938 13.3922 1.6875 12 1.6875C10.6078 1.6875 9.25781 1.95938 7.98516 2.49844C6.75703 3.01641 5.65312 3.76172 4.70625 4.70859C3.75938 5.65781 3.01641 6.75938 2.49609 7.9875C1.95938 9.25781 1.6875 10.6078 1.6875 12C1.6875 13.3922 1.95938 14.7422 2.49844 16.0148C3.01641 17.243 3.76172 18.3469 4.70859 19.2938C5.65781 20.2406 6.75938 20.9836 7.9875 21.5039C9.25781 22.0406 10.6078 22.3125 12 22.3125C13.3922 22.3125 14.7422 22.0406 16.0125 21.5016Z"
fill="currentColor"
/>
</svg>
);
}

export function CircleProgressFilled(props: BaseProps): JSX.Element {
const className = cx(props.className, 'fill-current');
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
{...props}
className={className}
>
<path
d="M12 0C5.37187 0 0 5.37187 0 12C0 18.6281 5.37187 24 12 24C18.6281 24 24 18.6281 24 12C24 5.37187 18.6281 0 12 0Z"
fill="currentColor"
/>
<path
d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"
fill="white"
/>
<path
d="M18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10Z"
fill="white"
/>
<path
d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z"
fill="white"
/>
</svg>
);
}

0 comments on commit d01f5b8

Please sign in to comment.