https://github.com/etiennemarais/vue-monograms

Vue Component to generate a monogram SVG shape with letters in that resembles your first/last name
https://github.com/etiennemarais/vue-monograms

Last synced: about 5 hours ago
JSON representation

Vue Component to generate a monogram SVG shape with letters in that resembles your first/last name

• Host: GitHub
• URL: https://github.com/etiennemarais/vue-monograms
• Owner: etiennemarais
• Created: 2018-01-05T11:03:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T19:36:30.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T23:49:25.926Z (about 1 month ago)
• Language: Vue
• Homepage: https://etiennemarais.github.io/vue-monograms/
• Size: 1.86 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Vue Monograms

Vue Component to generate a SVG monogram shape with letters in that resembles your first/last name.

### Supports

- [x] Hexagons (Plain)

- [ ] Hexagons (With internal patterns)

- [ ] Rectangles (Plain or with internal patterns)

- [ ] Circles (Plain or with internal patterns)

- [ ] Octagons (Plain or with internal patterns)

## Installation

You can include this plugin into your application by installing this package via `yarn`

```sh

yarn add vue-monograms

```

## Usage

Register the component in your `App.vue`.

```vue

import Monogram from 'vue-monograms';

Vue.component('monogram', Monogram);

```

You will be able to use this component throughout your application.

```

...

...

```

# Properties

## `width`

The width attribute is required to calculate the sides and points coordinates of the hexagon, calculated in pixels as a number value.

## `letters`

The letters provide the reference to a name/surname, but can be any string.

## `primary-color` 

Primary background color fill for the shape. Identified as a string hex color value ex: `'#00a8e8'`