https://github.com/javisperez/toe-icons

Basic, simple and free icons
https://github.com/javisperez/toe-icons

icons svg toe vue

Last synced: 8 days ago
JSON representation

Basic, simple and free icons

• Host: GitHub
• URL: https://github.com/javisperez/toe-icons
• Owner: javisperez
• License: apache-2.0
• Created: 2019-03-16T19:46:37.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T17:37:56.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T11:26:16.315Z (about 1 month ago)
• Topics: icons, svg, toe, vue
• Language: Vue
• Homepage:
• Size: 5.68 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![CI](https://github.com/javisperez/toe-icons/workflows/CI/badge.svg?branch=master)

# Toe Icons

A very minimalist linear icons pack https://javisperez.github.io/toe-icons

## About

This is a *monorepo* package of icons that includes svg icons and js components (e.g. Vue Components).

There are currently *two* packages being published from this repository:

`@toe-icons/icons` // contains the svg icons and a few helper json files with info and content

`@toe-icons/vue` // contains the icons vue components

## Installing

You can install any of the wanted packages from npm:

### Icons

```shell

npm install @toe-icons/icons

```

This will install the svg icons along with some util json files:

```

@toe-icons/

  ./dist

    icon-tags.json

    icon-content.json

    icon-info.json

    ./svg

      /[icon].svg

```

you can then import it like:

```js

import search from '@toe-icon/icons/dist/svg/search.svg

```

### Vue components

```shell

npm install @toe-icons/vue

```

Then you can import it with:

```js

import { TiArrowDown } from "@toe-icons/vue"

```

or use the plugin version:

```jsx

import Vue from "vue"

import ToeIcons from "@toe-icons/vue"

...

app.use(ToeIcons, {

  size: 24

})

...

```

#### Plugin Options

The Vue plugin version accept the following options:

|  Option  |  Default value  |  Description  |

| -------- | --------------- | ------------- |

|  size  |  24  |  Sets the default size for the given icons.  |

|  spin  |  false  |  Make the icon spin. Useful for things like loading spinners.  |

|  stroke  |  0  |  Width of the stroke  |

|  color  |  currentColor  |  Fill color  |

|  strokeColor  |  currentColor  |  Stroke color  |

About me

I'm no designer, I'm a frontend developer, I just need some specific icons that i decided to do myself for learning purpose mostly :)