diff --git a/README.md b/README.md index 15a8b162..c1c79329 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,10 @@ # Iconoir -
- - - Version - - - Project Stars - - - React Library - - - License - - - Discord - -
+[![Version](https://img.shields.io/github/v/release/iconoir-icons/iconoir?style=flat-square)](https://github.com/iconoir-icons/iconoir/releases) +[![Project Stars](https://img.shields.io/github/stars/iconoir-icons/iconoir?style=flat-square)](https://github.com/iconoir-icons/iconoir) +[![React Library](https://img.shields.io/npm/dm/iconoir-react?color=98E8F3&label=react&style=flat-square)](https://www.npmjs.com/package/iconoir-react) +[![License](https://img.shields.io/github/license/iconoir-icons/iconoir?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE) +[![Discord](https://img.shields.io/discord/998909400234348615?color=5865f2&label=Discord&style=flat-square)](https://discord.gg/txXcKCAmKW) ## What is Iconoir? @@ -25,53 +12,63 @@ Iconoir is an open-source library with 1300+ unique SVG icons, designed on a 24x Browse at iconoir.com → - - - - ## Basic Usage You can download any icon of the pack directly from https://iconoir.com or get them from this repository. -Additionally, the icons are available via the `iconoir` NPM package: -```bash -yarn add iconoir -# or -npm i iconoir -``` +The icons are also available via the [`iconoir`](https://www.npmjs.com/package/iconoir) NPM package: + +| npm | Yarn | pnpm | Bun | +| --------------- | ------------------ | ------------------ | ----------------- | +| `npm i iconoir` | `yarn add iconoir` | `pnpm add iconoir` | `bun add iconoir` | Example usage: + ```js -import Iconoir from 'iconoir/icons/iconoir.svg' +import Iconoir from 'iconoir/icons/iconoir.svg'; ``` ## React -A React library is available to install under the name `iconoir-react`. For more details, see the package [README](./packages/iconoir-react). +A React library is available under the name `iconoir-react`. + +For more details, see the package [README](./packages/iconoir-react). ## React Native -A React Native library is available to install under the name `iconoir-react-native`. For more details, see the package [README](./packages/iconoir-react-native). +A React Native library is available under the name `iconoir-react-native`. + +For more details, see the package [README](./packages/iconoir-react-native). ## Vue -A Vue library is available to install under the name `@iconoir/vue`. For more details, see the package [README](./packages/iconoir-vue). +A Vue library is available under the name `@iconoir/vue`. + +For more details, see the package [README](./packages/iconoir-vue). ## Flutter -A Flutter library is available to install under the name `iconoir_flutter`. For more details, see the package [README](./packages/iconoir-flutter). +A Flutter library is available under the name `iconoir_flutter`. + +For more details, see the package [README](./packages/iconoir-flutter). ## Framer -Iconoir is happily part of [Framer](https://framer.com) now. To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`. +Iconoir is happily part of [Framer](https://framer.com). + +To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`. + You can switch between icons from the right sidebar in the editor. ## CSS -Import the CSS File: +Import the CSS file: ```html - + ``` Here is an example in HTML: @@ -79,6 +76,7 @@ Here is an example in HTML: ```html ``` + The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons [here](https://iconoir.com). The icons are `display: inline-block` and default to the current font size. You can control this @@ -92,10 +90,10 @@ The library is available in the Figma community [here](https://www.figma.com/com To add `Iconoir-swift` to your Xcode project, follow these steps: -1. In Xcode, open your project and navigate to *File* > *Swift Packages* > *Add Package Dependency...* +1. In Xcode, open your project and navigate to _File_ > _Swift Packages_ > _Add Package Dependency..._ 2. Enter the repository URL: `https://github.com/iconoir-icons/iconoir-swift.git` -3. Choose the branch or version you want to add, and click *Next*. -4. Select the target where you want to use the package, then click *Finish*. +3. Choose the branch or version you want to add, and click _Next_. +4. Select the target where you want to use the package, then click _Finish_. ### UIKit @@ -123,4 +121,4 @@ struct ContentView: View { ## License -MIT License +[MIT License](./LICENSE) diff --git a/css/README.md b/css/README.md index 98907efc..bf2f52bb 100644 --- a/css/README.md +++ b/css/README.md @@ -1,9 +1,12 @@ -# Iconoir CSS +# Iconoir - CSS -Import the CSS File: +Import the CSS file: ```html - + ``` Here is an example in HTML: @@ -11,6 +14,7 @@ Here is an example in HTML: ```html ``` + The class must always be "iconoir-" and then the name of the icon. You can find the names of the icons [here](https://iconoir.com). The icons are `display: inline-block` and default to the current font size. You can control this diff --git a/docs/framer.md b/docs/framer.md index 268e228e..e59e1936 100644 --- a/docs/framer.md +++ b/docs/framer.md @@ -1,7 +1,11 @@ -# Iconoir Framer +# Iconoir - Framer -Iconoir is happily part of [Framer](https://framer.com) now. To start using the icons: On the top -menu, `Insert` > `Graphics` > `Iconoir`. You can switch between icons from the right sidebar in the +Iconoir is happily part of [Framer](https://framer.com). + +To start using the icons: On the top +menu, `Insert` > `Graphics` > `Iconoir`. + +You can switch between icons from the right sidebar in the editor. diff --git a/iconoir.com/pages/docs/[...slug].tsx b/iconoir.com/pages/docs/[...slug].tsx index df688e01..2ffa60ed 100644 --- a/iconoir.com/pages/docs/[...slug].tsx +++ b/iconoir.com/pages/docs/[...slug].tsx @@ -141,7 +141,6 @@ export function getDocumentationStructure(): DocumentationItem[] { path: 'iconoir-flutter', filepath: 'packages/iconoir-flutter/README.md', title: 'Flutter', - label: 'New', noReadOnGitHub: true, }, { diff --git a/packages/iconoir-flutter/README.md b/packages/iconoir-flutter/README.md index c7792d55..f2784564 100644 --- a/packages/iconoir-flutter/README.md +++ b/packages/iconoir-flutter/README.md @@ -1,10 +1,10 @@ -# Flutter Iconoir Icons +# Iconoir - Flutter -![PUB Version](https://img.shields.io/pub/v/iconoir_flutter?style=flat-square) -![PUB Monthly Downloads](https://img.shields.io/pub/dm/iconoir_flutter?style=flat-square) -![PUB License](https://img.shields.io/npm/l/iconoir_flutter?style=flat-square) +[![Pub Version](https://img.shields.io/pub/v/iconoir_flutter?style=flat-square)](https://pub.dev/packages/iconoir_flutter) +[![Pub Popularity](https://img.shields.io/pub/popularity/iconoir_flutter?style=flat-square)](https://pub.dev/packages/iconoir_flutter/score) +[![License](https://img.shields.io/github/license/iconoir-icons/iconoir?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-flutter/LICENSE) -Iconoir is an open source library with 900+ SVG Icons. No premium icons, no email sign-up, no newsletters. You can browse the full suite of icons at [iconoir.com](https://iconoir.com/). +[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. `iconoir_flutter` is an open source package that exports these icons as Flutter widgets (`flutter_svg`) that can be used in all of your Flutter projects. @@ -51,12 +51,11 @@ class DemoPage extends StatelessWidget { Default values for the most common props are given below: -| Prop name | Default value | -| ----------- | -------------- | -| color | "currentColor" | -| width | "1.5em" | -| height | "1.5em" | - +| Prop name | Default value | +| --------- | -------------- | +| color | "currentColor" | +| width | "1.5em" | +| height | "1.5em" | ## Icon names diff --git a/packages/iconoir-react-native/README.md b/packages/iconoir-react-native/README.md index 58520adf..8552310e 100644 --- a/packages/iconoir-react-native/README.md +++ b/packages/iconoir-react-native/README.md @@ -1,22 +1,18 @@ -# React Native Iconoir Icons +# Iconoir - React Native -![NPM Version](https://img.shields.io/npm/v/iconoir-react-native?style=flat-square) -![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-react-native?style=flat-square) -![NPM License](https://img.shields.io/npm/l/iconoir-react-native?style=flat-square) +[![NPM Version](https://img.shields.io/npm/v/iconoir-react?style=flat-square)](https://www.npmjs.com/package/iconoir-react-native) +[![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-react-native?style=flat-square)](https://www.npmjs.com/package/iconoir-react-native) +[![NPM License](https://img.shields.io/npm/l/iconoir-react-native?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-react-native/LICENSE) -Iconoir is an open source library with 900+ SVG Icons. No premium icons, no email sign-up, no newsletters. You can browse the full suite of icons at [iconoir.com](https://iconoir.com/). +[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. `iconoir-react-native` is an open source package that exports these icons as React Native components (`react-native-svg`) that can be used in all of your React Native projects. ## Installation -``` -yarn add iconoir-react-native react-native-svg -``` -or -``` -npm i iconoir-react-native react-native-svg -``` +| npm | Yarn | +| --------------------------------------------- | ------------------------------------------------ | +| `npm i iconoir-react-native react-native-svg` | `yarn add iconoir-react-native react-native-svg` | ## Usage @@ -37,13 +33,15 @@ export default App; ``` Icons can take any `react-native-svg` properties as optional props, e.g. + ```javascript ``` + Default values for the most common props are given below: | Prop name | Default value | -|-------------|----------------| +| ----------- | -------------- | | color | "currentColor" | | width | "1.5em" | | height | "1.5em" | @@ -55,7 +53,7 @@ Default values for the most common props are given below: Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider. ```tsx -import { IconoirProvider, Check } from 'iconoir-react-native' +import { IconoirProvider, Check } from 'iconoir-react-native'; return ( -) +); ``` ## Icon names @@ -78,7 +76,7 @@ return ( For the most part, the React components are named as PascalCase variations of their reference names (i.e. `add-circle-outline` becomes `AddCircleOutline`). However, some names have been altered slightly either because they start with numerical digits, which would lead to invalid React component names, or because they are organisations which use PascalCase in their brand names, such as `GitHub`. The altered names are as follows: | Iconoir Name | React Native Component | -|------------------|------------------------| +| ---------------- | ---------------------- | | `1st-medal` | `Medal1St` | | `4k-display` | `Display4K` | | `4x4-cell` | `Cell4X4` | diff --git a/packages/iconoir-react/README.md b/packages/iconoir-react/README.md index 47266020..c2ad84d1 100644 --- a/packages/iconoir-react/README.md +++ b/packages/iconoir-react/README.md @@ -1,22 +1,18 @@ -# React Iconoir Icons +# Iconoir - React -![NPM Version](https://img.shields.io/npm/v/iconoir-react?style=flat-square) -![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-react?style=flat-square) -![NPM License](https://img.shields.io/npm/l/iconoir-react?style=flat-square) +[![NPM Version](https://img.shields.io/npm/v/iconoir-react?style=flat-square)](https://www.npmjs.com/package/iconoir-react) +[![NPM Monthly Downloads](https://img.shields.io/npm/dm/iconoir-react?style=flat-square)](https://www.npmjs.com/package/iconoir-react) +[![NPM License](https://img.shields.io/npm/l/iconoir-react?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-react/LICENSE) -Iconoir is an open source library with 900+ SVG Icons. No premium icons, no email sign-up, no newsletters. You can browse the full suite of icons at [iconoir.com](https://iconoir.com/). +[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. `iconoir-react` is an open source package that exports these icons as React.js components that can be used in all of your React projects. ## Installation -``` -yarn add iconoir-react -``` -or -``` -npm i iconoir-react -``` +| npm | Yarn | pnpm | +| --------------------- | ------------------------ | ------------------------ | +| `npm i iconoir-react` | `yarn add iconoir-react` | `pnpm add iconoir-react` | ## Usage @@ -25,20 +21,22 @@ import React from 'react'; import { Iconoir } from 'iconoir-react'; const App = () => { - return + return ; }; export default App; ``` Icons can take any standard SVG properties as optional props, e.g. + ```javascript ``` + Default values for the most common props are given below: | Prop name | Default value | -|-------------|----------------| +| ----------- | -------------- | | color | "currentColor" | | width | "1.5em" | | height | "1.5em" | @@ -49,7 +47,7 @@ Default values for the most common props are given below: Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider. ```tsx -import { IconoirProvider, Check } from 'iconoir-react' +import { IconoirProvider, Check } from 'iconoir-react'; return ( -) +); ``` ## Icon names @@ -72,7 +70,7 @@ return ( For the most part, the React components are named as PascalCase variations of their reference names (i.e. `add-circle-outline` becomes `AddCircleOutline`). However, some names have been altered slightly either because they start with numerical digits, which would lead to invalid React component names, or because they are organisations which use PascalCase in their brand names, such as `GitHub`. The altered names are as follows: | Iconoir Name | React Component | -|------------------|-----------------| +| ---------------- | --------------- | | `1st-medal` | `Medal1St` | | `4k-display` | `Display4K` | | `4x4-cell` | `Cell4X4` | diff --git a/packages/iconoir-vue/README.md b/packages/iconoir-vue/README.md index 5447e342..b3b6d96c 100644 --- a/packages/iconoir-vue/README.md +++ b/packages/iconoir-vue/README.md @@ -1,30 +1,23 @@ -# Vue Iconoir Icons +# Iconoir - Vue -Iconoir is an open source library with 900+ SVG Icons. No premium icons, no email sign-up, no newsletters. You can browse the full suite of icons at [iconoir.com](https://iconoir.com/). +[![NPM Version](https://img.shields.io/npm/v/@iconoir/vue?style=flat-square)](https://www.npmjs.com/package/@iconoir/vue) +[![NPM Monthly Downloads](https://img.shields.io/npm/dm/@iconoir/vue?style=flat-square)](https://www.npmjs.com/package/@iconoir/vue) +[![NPM License](https://img.shields.io/npm/l/@iconoir/vue?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-vue/LICENSE) + +[Iconoir](https://iconoir.com/) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters. `@iconoir/vue` is an open source package that exports these icons as Vue.js components that can be used in all of your Vue projects. Thanks to `vue-demi`, both Vue 2 and Vue 3 are supported. ## Installation -``` -yarn add @iconoir/vue -``` - -or - -``` -npm i @iconoir/vue -``` - -or - -``` -pnpm add @iconoir/vue -``` +| npm | Yarn | pnpm | +| -------------------- | ----------------------- | ----------------------- | +| `npm i @iconoir/vue` | `yarn add @iconoir/vue` | `pnpm add @iconoir/vue` | ## Usage -Vue 3: +### Vue 3 + ```vue ``` +### Properties + Icons can take any standard SVG properties as optional props, e.g. ```jsx @@ -61,7 +57,7 @@ Icons can take any standard SVG properties as optional props, e.g. Default values for the most common props are given below: | Prop name | Default value | -| ----------- | -------------- | +| ------------ | -------------- | | color | "currentColor" | | width | "1.5em" | | height | "1.5em" | @@ -97,7 +93,7 @@ import { IconoirProvider, Check } from '@iconoir/vue'; For the most part, the Vue components are named as PascalCase variations of their reference names (i.e. `add-circle-outline` becomes `AddCircleOutline`). However, some names have been altered slightly either because they start with numerical digits, which would lead to invalid Vue component names, or because they are organisations which use PascalCase in their brand names, such as `GitHub`. The altered names are as follows: | Iconoir Name | Vue Component | -|------------------|-----------------| +| ---------------- | --------------- | | `1st-medal` | `Medal1St` | | `4k-display` | `Display4K` | | `4x4-cell` | `Cell4X4` |