deblan-mirror/iconoir
deblan-mirror/iconoir
1
0
Fork 0
mirror of https://github.com/iconoir-icons/iconoir synced 2024-05-23 00:32:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update & align readmes

Browse source
This commit is contained in:
Pascal Jufer 2023-09-27 23:50:19 +02:00
parent 5ff75ea7bf
commit 8ab0a3d086
8 changed files with 109 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
README.md
View file

@ -1,23 +1,10 @@
# Iconoir # Iconoir
<div> [![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)
<a href="https://github.com/lucaburgio/iconoir/releases"> [![React Library](https://img.shields.io/npm/dm/iconoir-react?color=98E8F3&label=react&style=flat-square)](https://www.npmjs.com/package/iconoir-react)
<img src="https://img.shields.io/github/v/release/lucaburgio/iconoir?style=flat-square" alt="Version" /> [![License](https://img.shields.io/github/license/iconoir-icons/iconoir?style=flat-square)](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE)
</a> [![Discord](https://img.shields.io/discord/998909400234348615?color=5865f2&label=Discord&style=flat-square)](https://discord.gg/txXcKCAmKW)
<a href="https://github.com/lucaburgio/iconoir">
<img src="https://img.shields.io/github/stars/lucaburgio/iconoir?style=flat-square" alt="Project Stars" />
</a>
<a href="https://www.npmjs.com/package/iconoir-react">
<img src="https://img.shields.io/npm/dm/iconoir-react?color=98E8F3&label=react&style=flat-square" alt="React Library" />
</a>
<a href="https://github.com/lucaburgio/iconoir/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/lucaburgio/iconoir?style=flat-square" alt="License" />
</a>
<a href="https://discord.gg/txXcKCAmKW">
<img src="https://img.shields.io/discord/998909400234348615?color=5865f2&label=Discord&style=flat-square" alt="Discord" />
</a>
</div>
## What is Iconoir? ## What is Iconoir?
@ -25,53 +12,63 @@ Iconoir is an open-source library with 1300+ unique SVG icons, designed on a 24x
<a href="https://iconoir.com"><strong>Browse at iconoir.com &rarr;</strong></a> <a href="https://iconoir.com"><strong>Browse at iconoir.com &rarr;</strong></a>
## Basic Usage ## Basic Usage
You can download any icon of the pack directly from https://iconoir.com or get them from this repository. 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: The icons are also available via the [`iconoir`](https://www.npmjs.com/package/iconoir) NPM package:
```bash
yarn add iconoir | npm | Yarn | pnpm | Bun |
# or | --------------- | ------------------ | ------------------ | ----------------- |
npm i iconoir | `npm i iconoir` | `yarn add iconoir` | `pnpm add iconoir` | `bun add iconoir` |
```
Example usage: Example usage:
```js ```js
import Iconoir from 'iconoir/icons/iconoir.svg' import Iconoir from 'iconoir/icons/iconoir.svg';
``` ```
## React ## 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 ## 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 ## 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 ## 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 ## 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. You can switch between icons from the right sidebar in the editor.
## CSS ## CSS
Import the CSS File: Import the CSS file:
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
/>
``` ```
Here is an example in HTML: Here is an example in HTML:
@ -79,6 +76,7 @@ Here is an example in HTML:
```html ```html
<i class="iconoir-hand-brake"></i> <i class="iconoir-hand-brake"></i>
``` ```
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 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 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: 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` 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*. 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*. 4. Select the target where you want to use the package, then click _Finish_.
### UIKit ### UIKit
@ -123,4 +121,4 @@ struct ContentView: View {
## License ## License
MIT License [MIT License](./LICENSE)

10
css/README.md
View file

@ -1,9 +1,12 @@
# Iconoir CSS # Iconoir - CSS
Import the CSS File: Import the CSS file:
```html ```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"> <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
/>
``` ```
Here is an example in HTML: Here is an example in HTML:
@ -11,6 +14,7 @@ Here is an example in HTML:
```html ```html
<i class="iconoir-hand-brake"></i> <i class="iconoir-hand-brake"></i>
``` ```
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 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 The icons are `display: inline-block` and default to the current font size. You can control this

10
docs/framer.md
View file

@ -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 Iconoir is happily part of [Framer](https://framer.com).
menu, `Insert` > `Graphics` > `Iconoir`. You can switch between icons from the right sidebar in the
To start using the icons: On the top
menu, `Insert` > `Graphics` > `Iconoir`.
You can switch between icons from the right sidebar in the
editor. editor.
<SuggestLibrary /> <SuggestLibrary />

1
iconoir.com/pages/docs/[...slug].tsx
View file

@ -141,7 +141,6 @@ export function getDocumentationStructure(): DocumentationItem[] {
path: 'iconoir-flutter', path: 'iconoir-flutter',
filepath: 'packages/iconoir-flutter/README.md', filepath: 'packages/iconoir-flutter/README.md',
title: 'Flutter', title: 'Flutter',
label: 'New',
noReadOnGitHub: true, noReadOnGitHub: true,
}, },
{ {

21
packages/iconoir-flutter/README.md
View file

@ -1,10 +1,10 @@
# Flutter Iconoir Icons # Iconoir - Flutter
![PUB Version](https://img.shields.io/pub/v/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 Monthly Downloads](https://img.shields.io/pub/dm/iconoir_flutter?style=flat-square) [![Pub Popularity](https://img.shields.io/pub/popularity/iconoir_flutter?style=flat-square)](https://pub.dev/packages/iconoir_flutter/score)
![PUB License](https://img.shields.io/npm/l/iconoir_flutter?style=flat-square) [![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. `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: Default values for the most common props are given below:
| Prop name | Default value | | Prop name | Default value |
| ----------- | -------------- | | --------- | -------------- |
| color | "currentColor" | | color | "currentColor" |
| width | "1.5em" | | width | "1.5em" |
| height | "1.5em" | | height | "1.5em" |
## Icon names ## Icon names

30
packages/iconoir-react-native/README.md
View file

@ -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 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) [![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) [![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. `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 ## Installation
``` | npm | Yarn |
yarn add iconoir-react-native react-native-svg | --------------------------------------------- | ------------------------------------------------ |
``` | `npm i iconoir-react-native react-native-svg` | `yarn add iconoir-react-native react-native-svg` |
or
```
npm i iconoir-react-native react-native-svg
```
## Usage ## Usage
@ -37,13 +33,15 @@ export default App;
``` ```
Icons can take any `react-native-svg` properties as optional props, e.g. Icons can take any `react-native-svg` properties as optional props, e.g.
```javascript ```javascript
<Iconoir color="red" height={36} width={36} /> <Iconoir color="red" height={36} width={36} />
``` ```
Default values for the most common props are given below: Default values for the most common props are given below:
| Prop name | Default value | | Prop name | Default value |
|-------------|----------------| | ----------- | -------------- |
| color | "currentColor" | | color | "currentColor" |
| width | "1.5em" | | width | "1.5em" |
| height | "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. 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 ```tsx
import { IconoirProvider, Check } from 'iconoir-react-native' import { IconoirProvider, Check } from 'iconoir-react-native';
return ( return (
<IconoirProvider <IconoirProvider
@ -70,7 +68,7 @@ return (
<Check /> <Check />
</SomeOtherContainer> </SomeOtherContainer>
</IconoirProvider> </IconoirProvider>
) );
``` ```
## Icon names ## 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: 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 | | Iconoir Name | React Native Component |
|------------------|------------------------| | ---------------- | ---------------------- |
| `1st-medal` | `Medal1St` | | `1st-medal` | `Medal1St` |
| `4k-display` | `Display4K` | | `4k-display` | `Display4K` |
| `4x4-cell` | `Cell4X4` | | `4x4-cell` | `Cell4X4` |

32
packages/iconoir-react/README.md
View file

@ -1,22 +1,18 @@
# React Iconoir Icons # Iconoir - React
![NPM Version](https://img.shields.io/npm/v/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) [![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) [![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. `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 ## Installation
``` | npm | Yarn | pnpm |
yarn add iconoir-react | --------------------- | ------------------------ | ------------------------ |
``` | `npm i iconoir-react` | `yarn add iconoir-react` | `pnpm add iconoir-react` |
or
```
npm i iconoir-react
```
## Usage ## Usage
@ -25,20 +21,22 @@ import React from 'react';
import { Iconoir } from 'iconoir-react'; import { Iconoir } from 'iconoir-react';
const App = () => { const App = () => {
return <Iconoir /> return <Iconoir />;
}; };
export default App; export default App;
``` ```
Icons can take any standard SVG properties as optional props, e.g. Icons can take any standard SVG properties as optional props, e.g.
```javascript ```javascript
<Iconoir color="red" height={36} width={36} /> <Iconoir color="red" height={36} width={36} />
``` ```
Default values for the most common props are given below: Default values for the most common props are given below:
| Prop name | Default value | | Prop name | Default value |
|-------------|----------------| | ----------- | -------------- |
| color | "currentColor" | | color | "currentColor" |
| width | "1.5em" | | width | "1.5em" |
| height | "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. 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 ```tsx
import { IconoirProvider, Check } from 'iconoir-react' import { IconoirProvider, Check } from 'iconoir-react';
return ( return (
<IconoirProvider <IconoirProvider
@ -64,7 +62,7 @@ return (
<Check /> <Check />
</SomeOtherContainer> </SomeOtherContainer>
</IconoirProvider> </IconoirProvider>
) );
``` ```
## Icon names ## 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: 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 | | Iconoir Name | React Component |
|------------------|-----------------| | ---------------- | --------------- |
| `1st-medal` | `Medal1St` | | `1st-medal` | `Medal1St` |
| `4k-display` | `Display4K` | | `4k-display` | `Display4K` |
| `4x4-cell` | `Cell4X4` | | `4x4-cell` | `Cell4X4` |

40
packages/iconoir-vue/README.md
View file

@ -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. `@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 ## Installation
``` | npm | Yarn | pnpm |
yarn add @iconoir/vue | -------------------- | ----------------------- | ----------------------- |
``` | `npm i @iconoir/vue` | `yarn add @iconoir/vue` | `pnpm add @iconoir/vue` |
or
```
npm i @iconoir/vue
```
or
```
pnpm add @iconoir/vue
```
## Usage ## Usage
Vue 3: ### Vue 3
```vue ```vue
<script setup> <script setup>
import { Iconoir } from '@iconoir/vue'; import { Iconoir } from '@iconoir/vue';
@ -35,7 +28,8 @@ import { Iconoir } from '@iconoir/vue';
</template> </template>
``` ```
Vue 2: ### Vue 2
```vue ```vue
<script> <script>
import { Iconoir } from '@iconoir/vue'; import { Iconoir } from '@iconoir/vue';
@ -48,10 +42,12 @@ export default
</script> </script>
<template> <template>
<Iconoir /> <Iconoir />
</template> </template>
``` ```
### Properties
Icons can take any standard SVG properties as optional props, e.g. Icons can take any standard SVG properties as optional props, e.g.
```jsx ```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: Default values for the most common props are given below:
| Prop name | Default value | | Prop name | Default value |
| ----------- | -------------- | | ------------ | -------------- |
| color | "currentColor" | | color | "currentColor" |
| width | "1.5em" | | width | "1.5em" |
| height | "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: 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 | | Iconoir Name | Vue Component |
|------------------|-----------------| | ---------------- | --------------- |
| `1st-medal` | `Medal1St` | | `1st-medal` | `Medal1St` |
| `4k-display` | `Display4K` | | `4k-display` | `Display4K` |
| `4x4-cell` | `Cell4X4` | | `4x4-cell` | `Cell4X4` |