Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greybax/brandifyjs
:cyclone: Text transformer/replacer with SVG icons for popular brands
https://github.com/greybax/brandifyjs
brand brand-assets branding branding-assets brands icons logo logos modifier replace replace-text replace-the-web replacement replacer svg svg-icons svg-images svgo text-replace text-transformations
Last synced: about 1 month ago
JSON representation
:cyclone: Text transformer/replacer with SVG icons for popular brands
- Host: GitHub
- URL: https://github.com/greybax/brandifyjs
- Owner: greybax
- License: mit
- Created: 2017-05-02T23:56:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T16:30:34.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T21:50:56.686Z (8 months ago)
- Topics: brand, brand-assets, branding, branding-assets, brands, icons, logo, logos, modifier, replace, replace-text, replace-the-web, replacement, replacer, svg, svg-icons, svg-images, svgo, text-replace, text-transformations
- Language: JavaScript
- Homepage: https://brandifyjs.js.org
- Size: 1.22 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# BrandifyJS
[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Coveralls Status][coveralls-image]][coveralls-url]
[![Dependency Status][depstat-image]][depstat-url]
[![DevDependency Status][depstat-dev-image]][depstat-dev-url]
[![JS.ORG Status][jsorg-image]][jsorg-url]
[](https://www.patreon.com/bePatron?u=14980891)
We are all to used to use different kind of emojies. Each of them has some code which transforms to icon.
So what about transform typical words in text to icon? This tool is all about it! :sunny: :surfer:
> This is a JS library which helps you to add company icons in your text.
Icons are using from cool repository :cherries: :rocket: - [simple-icons](https://github.com/simple-icons/simple-icons)
## Where I can use it?
This tool can work as with plain text and with html without any modification of DOM. Replace only those `#text nodes` where finds brand names.
## Playground:
You can try BrandifyJS web interface: [greybax.github.io/brandifyjs](https://greybax.github.io/brandifyjs)
## How to Use:
### 1. NPM
```
npm install brandifyjs
```
```js
const brandify = require('brandifyjs');
let myText = `
This is a text to brand icons replaced for lot of famous brands companies, technologies and tools...
Twitter, Github and more ...
Thanks for cool icons to simple icons!
`;
let newText = brandify(myText);
```
**Output**:
```html
This is a text to brand icons replaced for lot of famous brands companies, tehnologies and tools...
, and more ...
Thanks for cool icons to !
```
### 2. `` tag
```html
...
brandify(text, params);
```
## API
* `brandify(text)` or `brandify(text, 'replace')`
> Just replace all matched text on their icons
* `brandify(text, 'before')`
> Will insert icons before matched text
* `brandify(text, 'after')`
> Will insert icons after matched text
## Development
Clone the repo.
```
// install npm scripts
npm install
// create modified dist/simple-icons.json
npm run init
// create browser script in dist/brandifyjs-browser.js
npm run browserify
// starts lite-server with index.html
npm run dev
```
## Test
```
// run mocha tests from test.js
npm test
```
## License
MIT © [Aleksandr Filatov](https://alfilatov.com)
[npm-url]: https://npmjs.org/package/brandifyjs
[npm-image]: https://img.shields.io/npm/v/brandifyjs.svg
[travis-url]: https://travis-ci.org/greybax/brandifyjs
[travis-image]: https://img.shields.io/travis/greybax/brandifyjs/master.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/greybax/brandifyjs
[coveralls-image]: https://img.shields.io/coveralls/greybax/brandifyjs/master.svg?style=flat-square
[depstat-url]: https://david-dm.org/greybax/brandifyjs
[depstat-image]: https://david-dm.org/greybax/brandifyjs.svg?style=flat-square
[depstat-dev-url]: https://david-dm.org/greybax/brandifyjs
[depstat-dev-image]: https://david-dm.org/greybax/brandifyjs/dev-status.svg?style=flat-square
[jsorg-url]: http://js.org
[jsorg-image]: https://img.shields.io/badge/js.org-dns-ffb400.svg?style=flat-square