Skip to content

Commit

Permalink
Merge pull request #41 from MKAbuMattar/dev
Browse files Browse the repository at this point in the history
docs: new version
  • Loading branch information
MKAbuMattar authored Aug 11, 2022
2 parents 43135cf + 4f68859 commit 30c84e2
Show file tree
Hide file tree
Showing 7 changed files with 2,654 additions and 2,552 deletions.
105 changes: 66 additions & 39 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -1,72 +1,99 @@
<p align="center">
<a href="https://github.com/MKAbuMattar/devicons-react/releases">
<img alt="GitHub release (latest by semver)" src="https://img.shields.io/github/v/release/MKAbuMattar/devicons-react?color=%2360be86&label=Latest%20release&style=for-the-badge&sort=semver">
</a>
<a href="/LICENSE">
<img alt="GitHub" src="https://img.shields.io/github/license/MKAbuMattar/devicons-react?color=%2360be86&style=for-the-badge">
</a>
<a href="https://github.com/MKAbuMattar/devicons-react/stargazers">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/MKAbuMattar/devicons-react?color=%2360be86&label=github%20stars&style=for-the-badge">
</a>
</p>
<br/>
<div align="center">
<a href="https://devicons-react.vercel.app/">
<img src="https://raw.githubusercontent.com/MKAbuMattar/devicons-react/main/src/assets/devicons-react-original.svg" alt="Devicon Logo" height="140" />
</a>

<h1>Devicons React</h1>

<a href="https://devicons-react.vercel.app/">https://devicons-react.vercel.app/</a>

<br/>

<p>Devicons React is a collection of icons that symbolize programming languages, design tools, and development software, build into <a href="https://github.com/devicons/devicon">devicon</a>.</p>
</div>

<div align="center">
<a href="https://github.com/MKAbuMattar/devicons-react">
<img src="./assets/img/logo.png" alt="Devicon Logo" height="140" />
<a href="https://www.npmjs.com/package/devicons-react" target="_blank">
<img src="https://img.shields.io/badge/npm-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white" alt=""/>
</a>

<a href="https://github.com/MKAbuMattar/devicons-react" target="_blank">
<img src="https://img.shields.io/badge/github-%23181717.svg?style=for-the-badge&logo=github&logoColor=white" alt=""/>
</a>

<a href="https://github.com/MKAbuMattar/devicons-react/releases">
<img alt="GitHub release" src="https://img.shields.io/github/v/release/MKAbuMattar/devicons-react?color=%23d52128&label=Latest%20release&style=for-the-badge" />
</a>
<p align="center">
devicons-react aims to gather all logos representing development languages and tools, build into <a href="https://github.com/devicons/devicon">devicon</a>
</p>
<p align="center">
<a target="__blank" href="https://devicons-react.vercel.app/">Demo</a>
</p>

<a href="/LICENSE">
<img alt="GitHub" src="https://img.shields.io/github/license/MKAbuMattar/devicons-react?color=%23d52128&style=for-the-badge">
</a>

<a href="https://github.com/MKAbuMattar/devicons-react/stargazers">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/MKAbuMattar/devicons-react?color=%23d52128&label=github%20stars&style=for-the-badge">
</a>
</div>

<h2>Install package</h2>
## Install package

### Latest

```bash
```sh
#npm
npm install --save devicons-react
npm install --save devicons-react@latest

#yarn
yarn add devicons-react
yarn add devicons-react@latest

#pnpm
pnpm add devicons-react@latest
```

### Beta

```sh
#npm
npm install --save devicons-react@beta

#yarn
yarn add devicons-react@beta

#pnpm
pnpm add devicons-react@beta
```

<h3 id="default">Icon Behavior / props</h3>
<p>Default behavior for icon</p>

```js
import { Fragment } from 'react';
import { Aarch64Plain } from 'devicons-react';
import { Aarch64Plain } from 'devicons-react'

const App = () => {
return (
<Fragment>
<>
<Aarch64Plain />
</Fragment>
);
};
</>
)
}

export default App;
export default App
```

<p>Change size and color for icon</p>

```js
import { Fragment } from 'react';
import { Aarch64Plain, ReactOriginal } from 'devicons-react';
import AndroidOriginal from 'devicons-react/icons/AndroidOriginal';
import { Aarch64Plain, ReactOriginal } from 'devicons-react'
import AndroidOriginal from 'devicons-react/lib/icons/AndroidOriginal'

const App = () => {
return (
<Fragment>
<>
<Aarch64Plain />
<ReactOriginal fill="red" height="500" width="500" />
<AndroidOriginal fill="#d35" height="128" width="128" />
</Fragment>
);
};
</>
)
}

export default App;
export default App
```
28 changes: 14 additions & 14 deletions docs/package-lock.json

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

4 changes: 2 additions & 2 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
"prettier": "prettier --write ."
},
"dependencies": {
"devicons-react": "1.2.2",
"devicons-react-beta": "npm:[email protected].3-beta-0.0.6",
"devicons-react": "1.2.4",
"devicons-react-beta": "npm:[email protected].5-beta-0.0.1",
"highlight.js": "11.5.0",
"next": "12.2.3",
"next-pwa": "5.4.6",
Expand Down
36 changes: 29 additions & 7 deletions docs/src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

import DeviconsReactOriginal from 'devicons-react/icons/DeviconsReactOriginal';
import DeviconsReactOriginal from 'devicons-react/lib/icons/DeviconsReactOriginal';

import {
HeaderArrowWave,
Expand Down Expand Up @@ -41,22 +41,44 @@ const Header = () => {
</HeaderInfo>

<HeaderBoxGitHubLabel>
<a
href="https://www.npmjs.com/package/devicons-react"
target="_blank"
>
<img
src="https://img.shields.io/badge/npm-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white"
alt=""
/>
</a>

<a
href="https://github.com/MKAbuMattar/devicons-react"
target="_blank"
>
<img
src="https://img.shields.io/badge/github-%23181717.svg?style=for-the-badge&logo=github&logoColor=white"
alt=""
/>
</a>

<a href="https://github.com/MKAbuMattar/devicons-react/releases">
<img
alt="GitHub release (latest by semver)"
src="https://img.shields.io/github/v/release/MKAbuMattar/devicons-react?color=%2360be86&label=Latest%20release&style=for-the-badge&sort=semver"
alt="GitHub release"
src="https://img.shields.io/github/v/release/MKAbuMattar/devicons-react?color=%23d52128&label=Latest%20release&style=for-the-badge"
/>
</a>
<a href="https://github.com/MKAbuMattar/devicons-react/LICENSE">

<a href="/LICENSE">
<img
alt="GitHub"
src="https://img.shields.io/github/license/MKAbuMattar/devicons-react?color=%2360be86&style=for-the-badge"
src="https://img.shields.io/github/license/MKAbuMattar/devicons-react?color=%23d52128&style=for-the-badge"
/>
</a>

<a href="https://github.com/MKAbuMattar/devicons-react/stargazers">
<img
alt="GitHub Repo stars"
src="https://img.shields.io/github/stars/MKAbuMattar/devicons-react?color=%2360be86&label=github%20stars&style=for-the-badge"
src="https://img.shields.io/github/stars/MKAbuMattar/devicons-react?color=%23d52128&label=github%20stars&style=for-the-badge"
/>
</a>
</HeaderBoxGitHubLabel>
Expand Down Expand Up @@ -95,7 +117,7 @@ pnpm add devicons-react`}
<code className="js hljs language-javascript">
{`import { Fragment } from 'react'
import { Aarch64Plain, ReactOriginal } from 'devicons-react'
import AndroidOriginal from 'devicons-react/icons/AndroidOriginal'
import AndroidOriginal from 'devicons-react/lib/icons/AndroidOriginal'
const App = () => {
return (
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
Sticky,
} from './style';

import DeviconsReactOriginal from 'devicons-react/icons/DeviconsReactOriginal';
import DeviconsReactOriginal from 'devicons-react/lib/icons/DeviconsReactOriginal';

const index = () => {
return (
Expand Down
Loading

1 comment on commit 30c84e2

@vercel
Copy link

@vercel vercel bot commented on 30c84e2 Aug 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.