mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-05-10 18:36:45 +02:00
chore: update & align readmes
This commit is contained in:
Pascal Jufer
parent
5ff75ea7bf
commit
8ab0a3d086
78
README.md
78
README.md
|
|
@ -1,23 +1,10 @@
|
|||
# Iconoir
|
||||
|
||||
<div>
|
||||
|
||||
<a href="https://github.com/lucaburgio/iconoir/releases">
|
||||
<img src="https://img.shields.io/github/v/release/lucaburgio/iconoir?style=flat-square" alt="Version" />
|
||||
</a>
|
||||
<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>
|
||||
[](https://github.com/iconoir-icons/iconoir/releases)
|
||||
[](https://github.com/iconoir-icons/iconoir)
|
||||
[](https://www.npmjs.com/package/iconoir-react)
|
||||
[](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE)
|
||||
[](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
|
|||
|
||||
<a href="https://iconoir.com"><strong>Browse at iconoir.com →</strong></a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
<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:
|
||||
|
|
@ -79,6 +76,7 @@ Here is an example in HTML:
|
|||
```html
|
||||
<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 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)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
# Iconoir CSS
|
||||
# Iconoir - CSS
|
||||
|
||||
Import the CSS File:
|
||||
Import the CSS file:
|
||||
|
||||
```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:
|
||||
|
|
@ -11,6 +14,7 @@ Here is an example in HTML:
|
|||
```html
|
||||
<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 icons are `display: inline-block` and default to the current font size. You can control this
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
<SuggestLibrary />
|
||||
|
|
|
|||
|
|
@ -141,7 +141,6 @@ export function getDocumentationStructure(): DocumentationItem[] {
|
|||
path: 'iconoir-flutter',
|
||||
filepath: 'packages/iconoir-flutter/README.md',
|
||||
title: 'Flutter',
|
||||
label: 'New',
|
||||
noReadOnGitHub: true,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
# Flutter Iconoir Icons
|
||||
# Iconoir - Flutter
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://pub.dev/packages/iconoir_flutter)
|
||||
[](https://pub.dev/packages/iconoir_flutter/score)
|
||||
[](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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
# React Native Iconoir Icons
|
||||
# Iconoir - React Native
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/iconoir-react-native)
|
||||
[](https://www.npmjs.com/package/iconoir-react-native)
|
||||
[](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
|
||||
<Iconoir color="red" height={36} width={36} />
|
||||
```
|
||||
|
||||
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 (
|
||||
<IconoirProvider
|
||||
|
|
@ -70,7 +68,7 @@ return (
|
|||
<Check />
|
||||
</SomeOtherContainer>
|
||||
</IconoirProvider>
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
## 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` |
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
# React Iconoir Icons
|
||||
# Iconoir - React
|
||||
|
||||
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/iconoir-react)
|
||||
[](https://www.npmjs.com/package/iconoir-react)
|
||||
[](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 <Iconoir />
|
||||
return <Iconoir />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Icons can take any standard SVG properties as optional props, e.g.
|
||||
|
||||
```javascript
|
||||
<Iconoir color="red" height={36} width={36} />
|
||||
```
|
||||
|
||||
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 (
|
||||
<IconoirProvider
|
||||
|
|
@ -64,7 +62,7 @@ return (
|
|||
<Check />
|
||||
</SomeOtherContainer>
|
||||
</IconoirProvider>
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
## 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` |
|
||||
|
|
|
|||
|
|
@ -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/).
|
||||
[](https://www.npmjs.com/package/@iconoir/vue)
|
||||
[](https://www.npmjs.com/package/@iconoir/vue)
|
||||
[](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
|
||||
<script setup>
|
||||
import { Iconoir } from '@iconoir/vue';
|
||||
|
|
@ -35,7 +28,8 @@ import { Iconoir } from '@iconoir/vue';
|
|||
</template>
|
||||
```
|
||||
|
||||
Vue 2:
|
||||
### Vue 2
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { Iconoir } from '@iconoir/vue';
|
||||
|
|
@ -48,10 +42,12 @@ export default
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Iconoir />
|
||||
<Iconoir />
|
||||
</template>
|
||||
```
|
||||
|
||||
### 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` |
|
||||
|
|
|
|||
Loading…
Reference in a new issue