https://github.com/sparkmeter/buefy-feather-icon

Integrate the vue-feather icon component with the Buefy component framework
https://github.com/sparkmeter/buefy-feather-icon

bulma feather-icons hacktoberfest icons vue vuejs

Last synced: about 2 months ago
JSON representation

Integrate the vue-feather icon component with the Buefy component framework

• Host: GitHub
• URL: https://github.com/sparkmeter/buefy-feather-icon
• Owner: sparkmeter
• License: mit
• Created: 2021-10-08T02:19:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-03T19:30:52.000Z (almost 3 years ago)
• Last Synced: 2024-11-14T15:12:23.528Z (2 months ago)
• Topics: bulma, feather-icons, hacktoberfest, icons, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 878 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![](https://img.shields.io/npm/v/buefy-feather-icon)](https://www.npmjs.com/package/buefy-feather-icon)

## buefy-feather-icon

Use [vue-feather](https://www.npmjs.com/package/vue-feather) icon components in [Buefy](https://www.npmjs.com/package/buefy).

```vue

Details

```

## Installation

```shell

npm install buefy-feather-icon

```

Then, add the following to your application's entrypoint:

```js

import Vue from "vue";

import Buefy from "buefy";

import "buefy/dist/buefy.css";

import VueFeather from "vue-feather";

import BuefyFeatherIcon from "buefy-feather-icon";

Vue.use(VueFeather);

// Add the following fields to your Buefy configuration

Vue.use(Buefy, {

  defaultIconPack: "feather-icons",

  defaultIconComponent: BuefyFeatherIcon,

});

// Proceed with application initialization

new Vue(/** **/).$mount("#app");

```

## Configuration

Buefy uses the names of Font Awesome icons for its bundled components. For

example, it will use `times` when attempting to render a close _x_. The Feather

icon collection uses a different set of names for some of these. This library

ships with a basic set of mappings from Font Awesome to Feather. However, it is

not complete (PRs welcome!). To that end, if you wish to fill a gap, or

override any of the builtins icons, add the following configuration to your

entrypoint.

```js

Vue.use(BuefyFeatherIcon, {

  aliases: {

    "font-awesome-icon-name": "feather-icon-name",

  },

});

Vue.use(Buefy, {

  defaultIconPack: "feather-icons",

  defaultIconComponent: BuefyFeatherIcon,

});

```