devicons-react 1.0.5 → 1.0.9

package/README.md

@@ -13,7 +13,7 @@
 
 <div align="center">
     <a href="https://github.com/MKAbuMattar/devicons-react">
-        <img src="https://raw.githubusercontent.com/MKAbuMattar/devicons-react/main/assets/img/logo.png" alt="Devicon Logo" height="140" />
+        <img src="https://raw.githubusercontent.com/MKAbuMattar/devicons-react/main/docs/assets/img/logo.png" alt="Devicon Logo" height="140" />
     </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>
@@ -56,12 +56,14 @@ export default App
 ```js
 import { Fragment } from 'react'
 import { Aarch64Plain, ReactOriginal } from 'devicons-react'
+import DeviconsReactOriginal from 'devicons-react/dist/icon/deviconsreact-original'
 
 const App = () => {
   return (
     <Fragment>
       <Aarch64Plain />
       <ReactOriginal color="red" size="500" />
+      <DeviconsReactOriginal />
     </Fragment>
   )
 }

package/docs/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["styled-components"]
+}

package/docs/.env.local.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_GOOGLE_ANALYTICS=

package/docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Mohammad Abu Mattar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/docs/README.md

@@ -0,0 +1,72 @@
+<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://github.com/MKAbuMattar/devicons-react">
+        <img src="./assets/img/logo.png" alt="Devicon Logo" height="140" />
+    </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.netlify.app/">Demo</a>
+    </p>
+</div>
+
+<h2>Install package</h2>
+
+```bash
+#npm
+npm install --save devicons-react
+
+#yarn
+yarn add devicons-react
+```
+
+<h3 id="default">Icon Behavior / props</h3>
+<p>Default behavior for icon</p>
+
+```js
+import { Fragment } from 'react'
+import { Aarch64Plain } from 'devicons-react'
+
+const App = () => {
+  return (
+    <Fragment>
+      <Aarch64Plain />
+    </Fragment>
+  )
+}
+
+export default App
+```
+
+<p>Change size and color for icon</p>
+
+```js
+import { Fragment } from 'react'
+import { Aarch64Plain, ReactOriginal } from 'devicons-react'
+import DeviconsReactOriginal from 'devicons-react/dist/icon/deviconsreact-original'
+
+const App = () => {
+  return (
+    <Fragment>
+      <Aarch64Plain />
+      <ReactOriginal color="red" size="500" />
+      <DeviconsReactOriginal />
+    </Fragment>
+  )
+}
+
+export default App
+```

package/docs/components/FilteredList/FilteredList.js

@@ -0,0 +1,32 @@
+import { Fragment, useState, useCallback } from 'react'
+
+import List from './List'
+import { filterIt } from './filterIt'
+import initialItems from './initialItems'
+
+import { SearchSection, SearchInput, MainWrapper } from './Style'
+
+const FilteredList = () => {
+  const [items, setItems] = useState(initialItems)
+
+  const filterList = useCallback(({ target }) => {
+    const searchQuery = target.value.toLowerCase()
+    const updatedList = filterIt(searchQuery, initialItems)
+    setItems(updatedList)
+  }, [])
+
+  return (
+    <Fragment>
+      <main>
+        <SearchSection id="search">
+          <SearchInput type="text" placeholder="Search" onChange={filterList} />
+        </SearchSection>
+        <MainWrapper>
+          <List items={items} />
+        </MainWrapper>
+      </main>
+    </Fragment>
+  )
+}
+
+export default FilteredList

package/docs/components/FilteredList/List.js

@@ -0,0 +1,38 @@
+import { Fragment, useEffect } from 'react'
+import hljs from 'highlight.js'
+import javascript from 'highlight.js/lib/languages/javascript'
+import ListIcons from './ListIcons'
+hljs.registerLanguage('javascript', javascript)
+
+import { Cards, Card, CardInfo, CardTitle } from './Style'
+
+const List = ({ items }) => {
+  useEffect(() => {
+    hljs.initHighlighting()
+  }, [items])
+
+  return (
+    <Fragment>
+      <Cards>
+        {items.map((item, idx) => (
+          <Card key={idx}>
+            <CardInfo>
+              <ListIcons componentName={item.componentName} />
+
+              <CardTitle>{item.name}</CardTitle>
+            </CardInfo>
+            <pre>
+              <code className="js hljs language-javascript">
+                {`import { ${item.componentName} } from 'devicons-react'
+
+import ${item.componentName} from 'devicons-react/dist/icon/${item.fileName}'`}
+              </code>
+            </pre>
+          </Card>
+        ))}
+      </Cards>
+    </Fragment>
+  )
+}
+
+export default List