How to use feather-icons - 10 common examples

componentDidMount() {
    // get all the icons rendered
    feather.replace();
  }

setTimeout(()=> {
                        feather.replace();

                        // When variant was selected, enable all disabled input elements if they are not disabled intentionally.
                        this.$el.querySelectorAll('input, textarea, select').forEach((element) => {
                            if(!element.classList.contains('disabled')) {
                                element.disabled = false;
                            }
                        });

                    }, 2);
                }

/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable prefer-template */
const path = require('path');
const fs = require('fs');
const format = require('prettier-eslint');
const upperCamelCase = require('uppercamelcase');
const featherIcons = require('feather-icons/dist/icons.json');

const rootDir = path.join(__dirname, '..');

const icons = Object.keys(featherIcons);

const dir = path.join(rootDir, 'src/icons');

if (!fs.existsSync(dir)) {
  fs.mkdirSync(dir);
}

const initialTypeDefinitions = `/// 
import { ComponentType, SVGAttributes } from 'react';

interface Props extends SVGAttributes {
  color?: string;
  size?: string | number;
}

type Icon = ComponentType;

it('feather', () => {
        const vm = new Vue({
          template: '',
        }).$mount();

        expect(vm.$el.classList.contains('feather--feather')).to.be.true;
        expect(vm.$el.querySelector('svg').innerHTML).to.equal(icons.feather.contents);
      });
    });

import jump from "jump.js";
import { Init, Component } from "domponent/dist/domponent.development.js";
import feather from "feather-icons";

import "./fonts.scss";
import "./base.scss";
import "./includes/nav/nav";
import "./includes/tags/tags";
import "./includes/header/header";
import "./includes/btn/btn";
import "./includes/markup/markup";
import "./includes/charts/charts";
import "./includes/seo/seo";
import "./includes/api/api";

feather.replace();

class HoverBuddy extends Component {
  constructor(props) {
    super(props);
  }

  highlight(e) {
    console.log(this);
    const refName = e.target.dataset.refArray;
    if (refName) {
      this[refName].forEach(el => el.classList.add("same"));
    }
  }
  removeHighlight(e) {
    const refName = e.target.dataset.refArray;
    if (refName) {

ngOnInit() {
    feather.replace();
    this.showLoadingImage = true;
    this.projectsSevice.getAllProjects()
      .subscribe(
        (projects) => {
          this.projects = projects;
          this.showLoadingImage = false;
        },
        (error) => {
          this.showLoadingProjectsError = true;
          this.showLoadingImage = false;
        }
      )
  }

ngOnInit() {
    feather.replace();
    this.featuresService.getAllBySuiteId(this.navigationStateService.suiteIdSelected)
      .subscribe(
        (features) => {
          this.features = features;
          this.showLoadingImage = false;
        },
        (error) => {
          this.showLoadingFeaturesError = true;
          this.showLoadingImage = false;
        }
      );
    this.filenameCheck.pipe(debounceTime(500))
      .subscribe(
        (filename) => {
          this.featuresService.checkIfFilenameExists(this.navigationStateService.projectIdSelected, filename)
            .subscribe(

ngOnInit() {
    feather.replace();
    this.getAllScenarios();
    this.scenarioStateService.componentToOpen$
      .subscribe(
        (componentName) => {
          this.componentToOpen = componentName;
          if(componentName === 'scenarioHome'){
            this.getAllScenarios();
          }
        }
      );
  }

contentActions: function(row){
            let actions = [];
            if(!this.deletedContent) {
                actions.push({ url: this.getUpdateUrl(row.id), icon: feather.icons['edit'].toSvg({ width: 24, height: 16 }), name: 'Update content' });

                if(this.hasTranslations) {
                    actions.push({ url: this.getTranslationsUrl(row.id), icon: feather.icons['globe'].toSvg({ width: 24, height: 16 }), name: 'Translate content' });
                }

                actions.push({ url: this.getRevisionsUrl(row.id), icon: feather.icons['skip-back'].toSvg({ width: 24, height: 16 }), name: 'Revisions' });
                actions.push({ url: this.getDeleteUrl(row.id), icon: feather.icons['trash-2'].toSvg({ width: 24, height: 16 }), name: 'Delete content', class: 'uk-text-danger' });
            } else {
                actions.push({ url: this.getRecoverUrl(row.id), icon: feather.icons['rotate-ccw'].toSvg({ width: 24, height: 16 }), name: 'Recover' });
                actions.push({ url: this.getDeleteDefinitelyUrl(row.id), icon: feather.icons['x-circle'].toSvg({ width: 24, height: 16 }), name: 'Delete definitely', class: 'uk-text-danger' });
            }
            return actions;
        },
        formatDate: function(date) {