Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add default color support #165

Merged
merged 1 commit into from Nov 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lemon-lemons-run.md
@@ -0,0 +1,5 @@
---
'@icons-pack/react-simple-icons': minor
---

Add default color support
13 changes: 12 additions & 1 deletion README.md
Expand Up @@ -92,12 +92,23 @@ function ChangeTitle() {
}
```

## Use default color

Set color as `default` to use the default color for each icon

```jsx
import { ReactJs } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
return <ReactJs color="default" size={24} />;
}
```

## Custom styles

```jsx
import { ReactJs } from '@icons-pack/react-simple-icons';

// title default "React"
function CustomStyles() {
return <ReactJs className='myStyle' />;
}
Expand Down
2 changes: 1 addition & 1 deletion scripts/generate-components.js
Expand Up @@ -38,7 +38,7 @@ Promise.all(

return fsPromise.writeFile(
componentFilePath,
iconFileTemplate(componentName, baseName, simpleIcons[baseName].path),
iconFileTemplate(componentName, baseName, `#${simpleIcons[baseName].hex}`, simpleIcons[baseName].path),
formatFile,
);
}),
Expand Down
4 changes: 2 additions & 2 deletions scripts/templates.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion src/base.tsx
@@ -1,11 +1,14 @@
import * as React from 'react';
import { IconProps, IconType } from './types';

const baseIcon = (iconTitle: string, iconPath: string): IconType =>
const baseIcon = (iconTitle: string, hex: string, iconPath: string): IconType =>
React.forwardRef<SVGSVGElement, IconProps>(function(
{ title = iconTitle, color = 'currentColor', size = 24, ...others },
ref,
) {
if (color === 'default') {
color = hex;
}
return (
<svg
xmlns='http://www.w3.org/2000/svg'
Expand Down
6 changes: 3 additions & 3 deletions src/types.ts
Expand Up @@ -2,15 +2,15 @@ import * as React from 'react';

export type IconProps = React.ComponentPropsWithoutRef<'svg'> & {
/**
* Hex color or color name
* The title provides an accessible short text description to the SVG
*/
title?: string;
/**
* The size of the Icon.
* Hex color or color name or `default` to use the default hex for each icon
*/
color?: string;
/**
* The title provides an accessible short text description to the SVG
* The size of the Icon.
*/
size?: string | number;
};
Expand Down