# react-swm-icon-pack > React component for SWM icons Latest version **1.0.14** (published 2022-08-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-swm-icon-pack pnpm add react-swm-icon-pack yarn add react-swm-icon-pack bun add react-swm-icon-pack ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.14 | | Published | 2022-08-02 | | First published | 2021-05-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 1.1 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 35 | | Author | Kamila Graf | | Maintainers | kvmxlv | | Keywords | react, react-icons, icons, svg, inline, SWM, SWMIcon, SWMIconPack, react-swm-icon-pack, design | ## Links - npm: https://www.npmjs.com/package/react-swm-icon-pack - Repository: https://github.com/kvmxlv/react-swm-icon-pack - Homepage: https://github.com/kvmxlv/react-swm-icon-pack#readme - Issues: https://github.com/kvmxlv/react-swm-icon-pack/issues - npm.io page: https://npm.io/package/react-swm-icon-pack ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 1.0.14 (latest) — 2022-08-02 - 1.0.13 — 2021-12-01 - 1.0.12 — 2021-11-24 - 1.0.11 — 2021-11-21 - 1.0.10 — 2021-11-21 - 1.0.9 — 2021-11-14 - 1.0.8 — 2021-11-14 - 1.0.7 — 2021-11-14 - 1.0.6 — 2021-11-11 - 1.0.5 — 2021-11-11 - 1.0.4 — 2021-11-05 - 1.0.3 — 2021-11-05 - 1.0.2 — 2021-07-14 - 1.0.1 — 2021-06-12 - 1.0.0 — 2021-05-26 ## README # React SWM Icon Pack [![NPM](https://img.shields.io/npm/v/react-swm-icon-pack.svg)](https://www.npmjs.com/package/react-swm-icon-pack) ![Cover art](/images/swm-icon-pack-cover.jpg)       ## About the pack Carefully designed icons to help your projects shine like a diamond. More than 1100 icons divided into 4 styles and several categories are ready as react components to speed up building your product. SWM Icon Pack was originally published on [Figma Community](https://www.figma.com/community/file/942053544758339202/SWM-Icon-Pack) as SVG icon pack, now the family expanded thanks to [React Icon Pack](https://www.npmjs.com/package/react-swm-icon-pack) and [Figma Plugin](https://www.figma.com/community/plugin/977277388711779807/SWM-Icon-Pack), everything is free and ready to use.       ### What’s in it for you? * More than 1100 react components, ready to use right away; * 4 styles of icons - outline, broken, duotone, and curved; * Customization options - stroke, size, set, and color; * Easy preview on [Figma Community](https://www.figma.com/community/file/942053544758339202/SWM-Icon-Pack);       ![Cover art](/images/swm-icon-pack-01.jpg) ![Cover art](/images/swm-icon-pack-02.jpg) ![Cover art](/images/swm-icon-pack-03.jpg) ![Cover art](/images/swm-icon-pack-04.jpg)       ### Related projects * [SWM Icon Pack Figma Plugin on GitHub](https://github.com/kvmxlv/figma-swm-icon-pack) * [SWM Icon Pack Figma Plugin on Figma Community](https://www.figma.com/community/plugin/977277388711779807/SWM-Icon-Pack) * [SWM Icon Pack on Figma Community](https://www.figma.com/community/file/942053544758339202/SWM-Icon-Pack)       ## Installation yarn add react-swm-icon-pack or npm i react-swm-icon-pack       ## Usage ```jsx import React from 'react'; import { Air } from 'react-swm-icon-pack'; const App = () => { return ; }; export default App; ``` You can also pass inline props to the icon ```jsx ``` or even your custom styles ```jsx ``` You can also use SWMIcon component and pass as a prop icon name you prefer: ```jsx import React from 'react'; import { SWMIcon } from 'react-swm-icon-pack'; const App = () => { return ; }; export default App; ``` You can also include the whole icon pack: ```jsx import React from 'react'; import * as SWMIconPack from 'react-swm-icon-pack'; const App = () => { return ; }; export default App; ``` You can also use `SWMIconProvider` component, this will make all the icons that are within the context use the Provider properties. Setting props for any icon wrapped in SWMIconProvider will override Provider's properties. ```jsx import React from 'react'; import { SWMIconProvider, Air, Calendar, Cam } from 'react-swm-icon-pack'; const App = () => { return ( ); }; export default App; ```       ## Available props | Prop | Type | Default | Description | | ------------- | ------------------------------------- | --------- | ----------------------------------------------- | | `name` | `string` | | The icon you want to render | | `style` | `object` | | Custom styles property | | `set` | `outline` `broken` `duotone` `curved` | `outline` | Icons set option | | `size` | `string` `number` | `24` | Size of icon (applies as both width and height) | | `strokeWidth` | `string` `number` | `1.5` | Line stroke for icons | | `color` | `string` | `#001A72` | Primary color for icons | --- _Source: https://npm.io/package/react-swm-icon-pack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._