vue-badges v0.1.2

Vue Badges

Package to easily use static badges from shields.io with icon from simpleicons.org into documentation (or any Vue.js project).

Documentation

Install it with Yarn or NPM

yarn add -D vue-badges

OR

npm i vue-badges --save-dev

Import it, ES6 way, in main.js / app.js file

import VueBadges from 'vue-badges'

Vue.use(VueBadges)

Use it in a .vue file

<template>
    <div>
        <vue-badges :deps='[["AndroidStudio"]]'></vue-badges>
        <vue-badges
          :badges="[
            ['php'],
            ['php', '7.4'],
            ['nodejs'],
            [
              {
                label: 'My new tech',
                version: '2.4',
                color: '3DDC84',
                logo: 'android',
              },
            ],
          ]"
        ></vue-badges>
    </div>
</template>

Troubles

Usage with Tailwind CSS

By default, Tailwind CSS use preflight and apply display: block; on <img />, you can add this to your style

<style>
.badges-section img {
  @apply inline !important;
}
</style>

API

License

MIT © @ewilan-riviere