# framer-icon

> Dynamically tinted icons based off of a template image.

Latest version **0.2.0** (published 2015-07-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install framer-icon
pnpm add framer-icon
yarn add framer-icon
bun add framer-icon
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2015-07-08 |
| First published | 2015-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pete Schaffner |
| Maintainers | peteschaffner |
| Keywords | prototyping, framerjs |

## Links

- npm: https://www.npmjs.com/package/framer-icon
- Repository: https://github.com/peteschaffner/framer-icon
- Homepage: https://github.com/peteschaffner/framer-icon#readme
- Issues: https://github.com/peteschaffner/framer-icon/issues
- npm.io page: https://npm.io/package/framer-icon

## Dependencies (1)

- [coffeeify](https://npm.io/package/coffeeify.md) ^1.1.0

## Recent versions

- 0.2.0 (latest) — 2015-07-08
- 0.1.1 — 2015-05-25
- 0.1.0 — 2015-05-25

## README

# Framer icon module

<a title="Example" href="http://share.framerjs.com/edojz1mvguvx/">
  <img src="example.gif" width="375">
</a>

Dynamically tinted icons based off of a template image.

## Usage
```shell
$ cd <myProject>.framer
$ npm install framer-icon
```

modules/myModule.coffee:
```coffeescript
exports.Icon = require "framer-icon"
```

app.coffee:
```coffeescript
{Icon} = require "myModule"

new Icon
  width: 30
  height: 30
  image: "images/icon.png"
  tintColor: "cornflowerblue"
```

## API

### `Icon#tintColor <string>`
Get or set the tint color. Anything accepted by `Layer#backgroundColor` is
valid, with the addition of [CSS gradients][gradients]. `Icon#color` and
`Icon#backgroundColor` are aliases.

[gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

---
_Source: https://npm.io/package/framer-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._