Skip to content

Commit 1a8872a

Browse files
Emmanuel-DevelopsEmmanuel-Develops
authored
feat: add icons package (#8)
* feat: add icons package * fix: add pathProps to some icons, rm some hardcoded fill values * feat: proper icon export and icon stories * feat: added more icons for bdp-ui, rm duplicate filterIcon
1 parent 426932f commit 1a8872a

33 files changed

+842
-2
lines changed

‎.github/CONTRIBUTING.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Contributing
2+
3+
Thanks for your interest in contributing to BDP-UI! We welcome all contributions, whether they are bug reports, feature requests, or pull requests.
4+
5+
## Reporting bugs
6+
7+
If you find a bug in the code, please open an issue on GitHub.
8+
9+
## Working locally
10+
11+
The repo is managed with Yarn Workspaces.
12+
13+
### Development
14+
15+
```bash
16+
# install dependencies
17+
yarn install
18+
19+
# start Storybook and see examples in the browser
20+
yarn dev
21+
```
22+
23+
Make your changes and check that they resolve the problem with an example in Storybook. We also suggest adding tests to support your change, and then run `yarn test` to make sure nothing is broken.
24+
25+
You also need to inform Yarn workspaces that a particular package has changed for proper versioning. Run `yarn version check -i` to mark the appropriate type of change for those packages.
26+
27+
Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request.

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,18 @@
44
"main": "./dist/index.js",
55
"module": "./dist/index.mjs",
66
"types": "./dist/index.d.ts",
7+
"exports": {
8+
".": {
9+
"import": "./dist/index.mjs",
10+
"require": "./dist/index.js",
11+
"types": "./dist/index.d.ts"
12+
},
13+
"./icons": {
14+
"import": "./dist/icons.mjs",
15+
"require": "./dist/icons.js",
16+
"types": "./dist/icons.d.ts"
17+
}
18+
},
719
"files": [
820
"dist"
921
],

‎src/icons.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export { default as AppsIcon } from './icons/AppsIcon';
2+
export { default as ArrowLeft } from './icons/ArrowLeft';
3+
export { default as ArrowLinkRight } from './icons/ArrowLinkRight';
4+
export { default as ArrowLinkUpRight } from './icons/ArrowLinkUpRight';
5+
export { default as ArrowRight } from './icons/ArrowRight';
6+
export { default as AuthorIcon } from './icons/AuthorIcon';
7+
export { default as BitcoinIcon} from './icons/BitcoinIcon';
8+
export { default as BookmarkIcon} from './icons/BookmarkIcon';
9+
export { default as CalendarIcon} from './icons/CalendarIcon';
10+
export { default as CloseIconOutlined} from './icons/CloseIconOutlined';
11+
export { default as DateIcon} from './icons/DateIcon';
12+
export { default as DayIcon} from './icons/DayIcon';
13+
export { default as DiceIcon} from './icons/DiceIcon';
14+
export { default as DiscordIcon} from './icons/DiscordIcon';
15+
export { default as FilterIcon} from './icons/FilterIcon';
16+
export { default as FilterCloseIcon} from './icons/FilterCloseIcon';
17+
export { default as GithubIcon} from './icons/GithubIcon';
18+
export { default as MicIcon} from './icons/MicIcon';
19+
export { default as NightIcon} from './icons/NightIcon';
20+
export { default as NostrIcon} from './icons/NostrIcon';
21+
export { default as PlusIcon} from './icons/PlusIcon';
22+
export { default as SearchIcon} from './icons/SearchIcon';
23+
export { default as SortIcon} from './icons/SortIcon';
24+
export { default as SourceIcon} from './icons/SourceIcon';
25+
export { default as TimeIcon} from './icons/TimeIcon';
26+
export { default as TwitterXIcon} from './icons/TwitterXIcon';

‎src/icons/AppsIcon.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
const AppsIcon = ({ width = 24, height, ...props }: SVGProps<SVGSVGElement>) => (
5+
// height is destructed and unused, scaling is defined by width
6+
<svg width={width} viewBox="0 0 22 22" fill="none" {...props}>
7+
<path
8+
d="M5.50228 18.3326C4.99811 18.3326 4.56667 18.1533 4.20795 17.7945C3.84922 17.4358 3.66956 17.0041 3.66895 16.4993C3.66895 15.9951 3.84861 15.5637 4.20795 15.205C4.56728 14.8462 4.99872 14.6666 5.50228 14.666C6.00645 14.666 6.4382 14.8456 6.79753 15.205C7.15686 15.5643 7.33622 15.9957 7.33561 16.4993C7.33561 17.0035 7.15625 17.4352 6.79753 17.7945C6.43881 18.1539 6.00706 18.3332 5.50228 18.3326ZM11.0023 18.3326C10.4981 18.3326 10.0667 18.1533 9.70795 17.7945C9.34923 17.4358 9.16956 17.0041 9.16895 16.4993C9.16895 15.9951 9.34861 15.5637 9.70795 15.205C10.0673 14.8462 10.4987 14.6666 11.0023 14.666C11.5064 14.666 11.9382 14.8456 12.2975 15.205C12.6569 15.5643 12.8362 15.9957 12.8356 16.4993C12.8356 17.0035 12.6563 17.4352 12.2975 17.7945C11.9388 18.1539 11.5071 18.3332 11.0023 18.3326ZM16.5023 18.3326C15.9981 18.3326 15.5667 18.1533 15.2079 17.7945C14.8492 17.4358 14.6696 17.0041 14.6689 16.4993C14.6689 15.9951 14.8486 15.5637 15.2079 15.205C15.5673 14.8462 15.9987 14.6666 16.5023 14.666C17.0064 14.666 17.4382 14.8456 17.7975 15.205C18.1569 15.5643 18.3362 15.9957 18.3356 16.4993C18.3356 17.0035 18.1563 17.4352 17.7975 17.7945C17.4388 18.1539 17.0071 18.3332 16.5023 18.3326ZM5.50228 12.8326C4.99811 12.8326 4.56667 12.6533 4.20795 12.2945C3.84922 11.9358 3.66956 11.5041 3.66895 10.9993C3.66895 10.4951 3.84861 10.0637 4.20795 9.70496C4.56728 9.34623 4.99872 9.16657 5.50228 9.16596C6.00645 9.16596 6.4382 9.34562 6.79753 9.70496C7.15686 10.0643 7.33622 10.4957 7.33561 10.9993C7.33561 11.5035 7.15625 11.9352 6.79753 12.2945C6.43881 12.6539 6.00706 12.8332 5.50228 12.8326ZM11.0023 12.8326C10.4981 12.8326 10.0667 12.6533 9.70795 12.2945C9.34923 11.9358 9.16956 11.5041 9.16895 10.9993C9.16895 10.4951 9.34861 10.0637 9.70795 9.70496C10.0673 9.34623 10.4987 9.16657 11.0023 9.16596C11.5064 9.16596 11.9382 9.34562 12.2975 9.70496C12.6569 10.0643 12.8362 10.4957 12.8356 10.9993C12.8356 11.5035 12.6563 11.9352 12.2975 12.2945C11.9388 12.6539 11.5071 12.8332 11.0023 12.8326ZM16.5023 12.8326C15.9981 12.8326 15.5667 12.6533 15.2079 12.2945C14.8492 11.9358 14.6696 11.5041 14.6689 10.9993C14.6689 10.4951 14.8486 10.0637 15.2079 9.70496C15.5673 9.34623 15.9987 9.16657 16.5023 9.16596C17.0064 9.16596 17.4382 9.34562 17.7975 9.70496C18.1569 10.0643 18.3362 10.4957 18.3356 10.9993C18.3356 11.5035 18.1563 11.9352 17.7975 12.2945C17.4388 12.6539 17.0071 12.8332 16.5023 12.8326ZM5.50228 7.33262C4.99811 7.33262 4.56667 7.15326 4.20795 6.79454C3.84922 6.43582 3.66956 6.00407 3.66895 5.49929C3.66895 4.99512 3.84861 4.56368 4.20795 4.20495C4.56728 3.84623 4.99872 3.66657 5.50228 3.66595C6.00645 3.66595 6.4382 3.84562 6.79753 4.20495C7.15686 4.56429 7.33622 4.99573 7.33561 5.49929C7.33561 6.00346 7.15625 6.43521 6.79753 6.79454C6.43881 7.15387 6.00706 7.33323 5.50228 7.33262ZM11.0023 7.33262C10.4981 7.33262 10.0667 7.15326 9.70795 6.79454C9.34923 6.43582 9.16956 6.00407 9.16895 5.49929C9.16895 4.99512 9.34861 4.56368 9.70795 4.20495C10.0673 3.84623 10.4987 3.66657 11.0023 3.66595C11.5064 3.66595 11.9382 3.84562 12.2975 4.20495C12.6569 4.56429 12.8362 4.99573 12.8356 5.49929C12.8356 6.00346 12.6563 6.43521 12.2975 6.79454C11.9388 7.15387 11.5071 7.33323 11.0023 7.33262ZM16.5023 7.33262C15.9981 7.33262 15.5667 7.15326 15.2079 6.79454C14.8492 6.43582 14.6696 6.00407 14.6689 5.49929C14.6689 4.99512 14.8486 4.56368 15.2079 4.20495C15.5673 3.84623 15.9987 3.66657 16.5023 3.66595C17.0064 3.66595 17.4382 3.84562 17.7975 4.20495C18.1569 4.56429 18.3362 4.99573 18.3356 5.49929C18.3356 6.00346 18.1563 6.43521 17.7975 6.79454C17.4388 7.15387 17.0071 7.33323 16.5023 7.33262Z"
9+
fill="currentColor"
10+
/>
11+
</svg>
12+
);
13+
14+
export default AppsIcon;

‎src/icons/ArrowLeft.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
const ArrowLeft = ({ width = 7, height, pathProps, ...props }: SVGProps<SVGSVGElement> & { pathProps?: SVGProps<SVGPathElement> }) => {
4+
// height is destructed and unused, scaling is defined by width
5+
return (
6+
<svg
7+
width={width}
8+
viewBox="0 0 7 12"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M0.354784 5.17724C0.127604 5.39365 0 5.687 0 5.99287C0 6.29873 0.127604 6.59208 0.354784 6.8085L4.92909 11.1621C5.15667 11.3785 5.46529 11.5001 5.78705 11.5C6.10882 11.4999 6.41738 11.3782 6.64485 11.1617C6.87233 10.9452 7.00008 10.6516 7 10.3454C6.99992 10.0393 6.87203 9.74573 6.64445 9.52931L2.92743 5.99287L6.64445 2.45642C6.86554 2.23884 6.98796 1.94734 6.98535 1.64471C6.98274 1.34208 6.8553 1.05254 6.63048 0.83844C6.40566 0.624342 6.10145 0.50282 5.78337 0.500049C5.4653 0.497277 5.1588 0.613478 4.9299 0.823624L0.353974 5.17647L0.354784 5.17724Z"
17+
fill="currentColor"
18+
{...pathProps}
19+
/>
20+
</svg>
21+
);
22+
};
23+
export default ArrowLeft;

‎src/icons/ArrowLinkRight.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
const ArrowLinkRight = ({
5+
width = 24,
6+
height,
7+
pathProps,
8+
...props
9+
}: SVGProps<SVGSVGElement> & { pathProps?: SVGProps<SVGPathElement> }) => (
10+
// height is destructed and unused, scaling is defined by width
11+
<svg
12+
width={width}
13+
viewBox="0 0 24 24"
14+
fill="none"
15+
xmlns="http://www.w3.org/2000/svg"
16+
{...props}
17+
>
18+
<path
19+
d="M20 12.5H4"
20+
stroke="currentColor"
21+
stroke-width="1.5"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
{...pathProps}
25+
/>
26+
<path
27+
d="M15 17.5C15 17.5 20 13.8176 20 12.5C20 11.1824 15 7.5 15 7.5"
28+
stroke="currentColor"
29+
stroke-width="1.5"
30+
stroke-linecap="round"
31+
stroke-linejoin="round"
32+
{...pathProps}
33+
/>
34+
</svg>
35+
);
36+
37+
export default ArrowLinkRight;

‎src/icons/ArrowLinkUpRight.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
const ArrowLinkUpRight = ({
5+
width = 24,
6+
height,
7+
pathProps,
8+
...props
9+
}: SVGProps<SVGSVGElement> & { pathProps?: SVGProps<SVGPathElement> }) => (
10+
// height is destructed and unused, scaling is defined by width
11+
<svg
12+
width={width}
13+
viewBox="0 0 24 24"
14+
fill="none"
15+
xmlns="http://www.w3.org/2000/svg"
16+
{...props}
17+
>
18+
<path
19+
d="M17 7.5L6 18.5"
20+
stroke="currentColor"
21+
strokeWidth="1.5"
22+
stroke-linecap="round"
23+
{...pathProps}
24+
/>
25+
<path
26+
d="M11 6.6315C11 6.6315 16.6335 6.15661 17.4885 7.01152C18.3434 7.86644 17.8684 13.5 17.8684 13.5"
27+
stroke="currentColor"
28+
stroke-width="1.5"
29+
stroke-linecap="round"
30+
stroke-linejoin="round"
31+
{...pathProps}
32+
/>
33+
</svg>
34+
);
35+
36+
export default ArrowLinkUpRight;

‎src/icons/ArrowRight.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
const ArrowRight = ({ width = 7, height, pathProps, ...props }: SVGProps<SVGSVGElement> & { pathProps?: SVGProps<SVGPathElement> }) => {
4+
// height is destructed and unused, scaling is defined by width
5+
return (
6+
<svg
7+
width={width}
8+
viewBox="0 0 7 12"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
fillRule="evenodd"
15+
clipRule="evenodd"
16+
d="M6.64522 5.17724C6.8724 5.39365 7 5.687 7 5.99287C7 6.29873 6.8724 6.59208 6.64522 6.8085L2.07091 11.1621C1.84333 11.3785 1.53471 11.5001 1.21295 11.5C0.891176 11.4999 0.582617 11.3782 0.355145 11.1617C0.127674 10.9452 -7.58015e-05 10.6516 3.37439e-08 10.3454C7.5869e-05 10.0393 0.127971 9.74573 0.35555 9.52931L4.07257 5.99287L0.35555 2.45642C0.134458 2.23884 0.0120353 1.94734 0.0146483 1.64471C0.0172613 1.34208 0.144701 1.05254 0.36952 0.83844C0.594339 0.624342 0.898547 0.50282 1.21663 0.500049C1.5347 0.497277 1.8412 0.613478 2.0701 0.823624L6.64603 5.17647L6.64522 5.17724Z"
17+
fill="currentColor"
18+
{...pathProps}
19+
/>
20+
</svg>
21+
);
22+
};
23+
export default ArrowRight;

‎src/icons/AuthorIcon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
const AuthorIcon = ({ width = 20, height, ...props }: SVGProps<SVGSVGElement>) => (
5+
// height is destructed and unused, scaling is defined by width
6+
<svg
7+
width={width}
8+
viewBox="0 0 20 20"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...props}
12+
>
13+
<path
14+
d="M10.0052 9.77354C11.8049 9.77354 13.3535 8.1664 13.3535 6.07354C13.3535 4.00639 11.7963 2.47461 10.0052 2.47461C8.21382 2.47461 6.65703 4.03997 6.65703 6.09068C6.65703 8.1664 8.21417 9.77354 10.0052 9.77354ZM4.74846 17.5246H15.262C16.5763 17.5246 17.0449 17.1482 17.0449 16.4114C17.0449 14.2518 14.3413 11.2721 10.0052 11.2721C5.66096 11.2721 2.95703 14.2518 2.95703 16.4114C2.95703 17.1482 3.42596 17.5246 4.74846 17.5246Z"
15+
fill="currentColor"
16+
/>
17+
</svg>
18+
);
19+
20+
export default AuthorIcon;

‎src/icons/BitcoinIcon.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from "react";
2+
import { SVGProps } from "react";
3+
4+
const BitcoinIcon = ({ width = 18, height, ...props }: SVGProps<SVGSVGElement>) => (
5+
// height is destructed and unused, scaling is defined by width
6+
<svg
7+
width={width} viewBox="0 0 18 18" fill="none"
8+
xmlns="http://www.w3.org/2000/svg"
9+
{...props}
10+
>
11+
<path d="M8.28312 7.967L8.23312 7.952L8.76112 5.83496L8.97312 5.88496C9.67912 6.04196 11.1981 6.38296 10.9231 7.498C10.6281 8.671 8.87412 8.144 8.28312 7.967ZM7.37012 11.405L7.45612 11.43C8.18412 11.647 10.2521 12.262 10.5321 11.097C10.8211 9.976 8.96212 9.539 8.13012 9.344C8.03912 9.322 7.96012 9.304 7.89812 9.288L7.37012 11.405Z" fill="currentColor"/>
12+
<path
13+
fill-rule="evenodd" clip-rule="evenodd"
14+
d="M9 18C10.1819 18 11.3522 17.7672 12.4442 17.3149C13.5361 16.8626 14.5282 16.1997 15.364 15.364C16.1997 14.5282 16.8626 13.5361 17.3149 12.4442C17.7672 11.3522 18 10.1819 18 9C18 7.8181 17.7672 6.64778 17.3149 5.55585C16.8626 4.46392 16.1997 3.47177 15.364 2.63604C14.5282 1.80031 13.5361 1.13738 12.4442 0.68508C11.3522 0.23279 10.1819 0 9 0C6.61305 0 4.32387 0.94821 2.63604 2.63604C0.94821 4.32387 0 6.61305 0 9C0 11.3869 0.94821 13.6761 2.63604 15.364C4.32387 17.0518 6.61305 18 9 18ZM12.873 7.616C13.079 6.314 12.18 5.636 10.933 5.178L11.371 3.408L10.381 3.162L9.954 4.888L9.761 4.838C9.565 4.788 9.372 4.738 9.174 4.694L9.602 2.969L8.585 2.717L8.157 4.442L6.139 3.942L5.847 5.122C5.847 5.122 6.596 5.285 6.568 5.301C6.968 5.409 7.037 5.693 7.015 5.91L6.506 7.917L5.808 10.74C5.753 10.874 5.618 11.066 5.344 11C5.356 11.012 4.616 10.809 4.616 10.809L4.13 12.054L6.088 12.588L5.652 14.349L6.635 14.593L7.072 12.831C7.23 12.877 7.39 12.914 7.545 12.95C7.661 12.977 7.774 13.003 7.881 13.032L7.444 14.793L8.429 15.037L8.866 13.276C10.561 13.599 11.841 13.448 12.413 11.779C12.873 10.449 12.443 9.689 11.55 9.19C12.22 9.027 12.717 8.563 12.873 7.616Z"
15+
fill="currentColor"
16+
/>
17+
</svg>
18+
);
19+
20+
export default BitcoinIcon;

0 commit comments

Comments
 (0)