mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-15 20:25:06 +02:00
chore: update & align readmes
This commit is contained in:
parent
5ff75ea7bf
commit
8ab0a3d086
78
README.md
78
README.md
|
@ -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 →</strong></a>
|
<a href="https://iconoir.com"><strong>Browse at iconoir.com →</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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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` |
|
||||||
|
|
|
@ -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` |
|
||||||
|
|
|
@ -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` |
|
||||||
|
|
Loading…
Reference in a new issue