Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justeat/f-icons
Common icons for use in Fozzie projects.
https://github.com/justeat/f-icons
fozzie ui
Last synced: about 2 months ago
JSON representation
Common icons for use in Fozzie projects.
- Host: GitHub
- URL: https://github.com/justeat/f-icons
- Owner: justeat
- License: other
- Created: 2017-09-26T08:23:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-23T15:00:16.000Z (almost 2 years ago)
- Last Synced: 2024-09-25T22:25:32.940Z (4 months ago)
- Topics: fozzie, ui
- Language: JavaScript
- Size: 979 KB
- Stars: 0
- Watchers: 34
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# `f-icons` — Just Eat Fozzie Icon Set
[![npm version](https://badge.fury.io/js/%40justeat%2Ff-icons.svg)](https://badge.fury.io/js/%40justeat%2Ff-icons)
[![Build Status](https://travis-ci.org/justeat/f-icons.svg)](https://travis-ci.org/justeat/f-icons)
[![Known Vulnerabilities](https://snyk.io/test/github/justeat/f-icons/badge.svg?targetFile=package.json)](https://snyk.io/test/github/justeat/f-icons?targetFile=package.json)## Contributing
If you want to add a new icon please check [our icon list](https://justeat.github.io/fozzie-components/@justeat/storybook/index.html?path=/story/components-atoms--icons) first to avoid duplications. Before adding svg file please run it through [svgomg](https://jakearchibald.github.io/svgomg/) with default setting applied plus make sure to **turn off** “Clean IDs” setting and **turn on** "Prefer viewBox to width/height" and "Prettify markup" settings. On top of that please prefix all the ids in the files with the icon name. For example `id="symbol"` for close-circle.svg should become `id="close-circle-symbol"`, as same ids in different files can conflict and cause visual issues as well as invalidate the markup.
## Usage
At its core, `f-icons` is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use these icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
The following are additional ways you can use `f-icons`.
### Client-side JavaScript
#### 1. Install
> **Note:** If you intend to use `f-icons` with a CDN, you can skip this installation step.
Install with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or Yarn.
```shell
npm install @justeat/f-icons --saveyarn add @justeat/f-icons
```Or just copy [`f-icons.js`](https://unpkg.com/@justeat/f-icons/dist/f-icons.js) or [`f-icons.min.js`](https://unpkg.com/@justeat/f-icons/dist/f-icons.min.js) into your project directory. You don't need both `f-icons.js` and `f-icons.min.js`.
#### 2. Include
Include `f-icons.js` or `f-icons.min.js` with a `` tag:
```html
<script src="path/to/dist/f-icons.js">
```> **Note:** `f-icons.js` and `f-icons.min.js` are located in the `dist` directory of the npm package.
Or load the script from a CDN provider:
```html
```
After including the script, `f-icons` will be available as a global variable. ### TODO test if this is the name of the global variable ###
#### 3. Use
To use an icon on your page, add a `data-ficons` attribute with the icon name to an element:
```html
```#### 4. Replace
Call the `ficons.replace()` method:
```html
ficons.replace()
```
All elements that have a `data-ficons` attribute will be replaced with SVG markup corresponding to their `data-ficons` attribute value. See the [API Reference](#api-reference) for more information about `ficons.replace()`.
### Node
#### 1. InstallInstall with [npm](https://docs.npmjs.com/getting-started/what-is-npm) or Yarn:
```shell
npm install @justeat/f-icons --saveyarn add @justeat/f-icons
```#### 2. Require
```js
const ficons = require('@justeat/f-icons')
```#### 3. Use
```js
ficons.icons.x
// {
// name: 'x',
// contents: '`,
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'c-ficon c-ficon--x',
// xmlns: 'http://www.w3.org/2000/svg',
// },
// toSvg: [Function],
// }ficons.icons.x.toSvg()
//ficons.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
//
```See the [API Reference](#api-reference) for more information about the available properties and methods of the `ficons` object.
## API Reference
### `ficons.icons`
An object with data about every icon.
#### Usage
```js
ficons.icons.x
// {
// name: 'x',
// contents: '',
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'c-ficon c-ficon--x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }ficons.icons.x.toString()
// ''
```> **Note:** `x` in the above example can be replaced with any valid icon name. Icons with multi-word names (e.g. `arrow-right`) **cannot** be accessed using dot notation (e.g. `ficons.icons.x`). Instead, use bracket notation (e.g. `ficons.icons['arrow-right']`).
[View Source](https://github.com/justeat/f-icons/blob/master/src/icons.js)
---
### `ficons.icons[name].toSvg([attrs])`
Returns an SVG string.
#### Parameters
| Name | Type | Description |
| --------- | ------ | ----------- |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. |> **Hint:** You might find these SVG attributes helpful for manipulating icons:
> * [`color`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color)
> * [`width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width)
> * [`height`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height)
> * [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)
> * [`stroke-linecap`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap)
> * [`stroke-linejoin`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin)#### Usage
```js
ficons.icons.circle.toSvg()
// ''ficons.icons.circle.toSvg({ 'stroke-width': 1 })
// ''ficons.icons.circle.toSvg({ class: 'foo bar' })
// ''
```[View Source](https://github.com/justeat/f-icons/blob/master/src/icon.js)
---
### `ficons.replace([attrs])`
Replaces all elements that have a `data-ficons` attribute with SVG markup corresponding to the element's `data-ficons` attribute value.
#### Parameters
| Name | Type | Description |
| ---------- | ------ | ----------- |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. |#### Usage
> **Note:** `ficons.replace()` only works in a browser environment.
Simple usage:
```htmlficons.replace()
```
You can pass `ficons.replace()` an `attrs` object:
```htmlficons.replace({ class: 'foo bar', 'stroke-width': 1 })
```
All attributes on the placeholder element (i.e. ``) will be copied to the `` tag:
```html
ficons.replace()
```
[View Source](https://github.com/justeat/f-icons/blob/master/src/replace.js)
---
### (DEPRECATED) `ficons.toSvg(name, [attrs])`
> **Note:** `ficons.toSvg()` is deprecated. Please use `ficons.icons[name].toSvg()` instead.
Returns an SVG string.
#### Parameters
| Name | Type | Description |
| --------- | ------ | ----------- |
| `name` | string | Icon name |
| `attrs` (optional) | Object | Key-value pairs in the `attrs` object will be mapped to HTML attributes on the `` tag (e.g. `{ foo: 'bar' }` maps to `foo="bar"`). All default attributes on the `` tag can be overridden with the `attrs` object. |#### Usage
```js
ficons.toSvg('circle')
// ''ficons.toSvg('circle', { 'stroke-width': 1 })
// ''ficons.toSvg('circle', { class: 'foo bar' })
// ''
```[View Source](https://github.com/justeat/f-icons/blob/master/src/to-svg.js)
## Credits
The `@justeat/f-icons` project owes a great deal to the [Feather SVG Icon Library](https://github.com/feathericons/feather). This project started as a fork of that project for developers at Just Eat to build out icons, while giving us a great platform for the initial build and API that Feather had already built.