How to use file-icons-js - 10 common examples

TreeView.prototype.addFile = function (parentElement, file) {
  var self = this

  // Render file
  var el = document.createElement('li')
  el.className = 'file'

  var a = document.createElement('a')
  a.className = 'filelink'
  a.id = file.path

  var icon = document.createElement('i')
  icon.className = icons.getClassWithColor(file.path)

  var span = document.createElement('span')
  span.innerHTML = file.name

  a.appendChild(icon)
  a.appendChild(span)

  a.addEventListener('click', function (e) {
    self.emit('open', {
      target: e.target,
      path: file.path,
      parentElement: parentElement
    })
  })

  el.appendChild(a)

$items.each((index, item) => {
      const $item = $(item);
      const name = $item.parent().contents().get(1).data;
      const hasIcon = $item.find('.gfi').length > 0;

      if (!hasIcon) {
        let className;
          if (isColor) {
            className = fileIcons.getClassWithColor(name) || DEFAULT_ICON;
          } else {
            className = fileIcons.getClass(name) || DEFAULT_ICON;
          }
          const $icon = $(`<span class="gfi ${className}"></span>`);
          $item.append($icon);

          // Bind on click for downloading the file
          $icon.on('click', () =&gt; {
            $item.click();
          });
      }
    });
  });

$items.each((index, item) => {
      const $item = $(item);
      const name = $item.parent().contents().get(1).data;
      const hasIcon = $item.find('.gfi').length > 0;

      if (!hasIcon) {
        let className;
          if (isColor) {
            className = fileIcons.getClassWithColor(name) || DEFAULT_ICON;
          } else {
            className = fileIcons.getClass(name) || DEFAULT_ICON;
          }
          const $icon = $(`<span class="gfi ${className}"></span>`);
          $item.append($icon);

          // Bind on click for downloading the file
          $icon.on('click', () =&gt; {
            $item.click();
          });
      }
    });
  });

api.readFile(path).then((data) => {
            const { EditorTabState } = mobxStore
            const activeTab = EditorTabState.activeTab
            FileStore.loadNodeData(data)
            TabStore.updateTab({
              icon: (path && icons.getClassWithColor(path.split('/').pop())) || 'fa fa-file-text-o',
              id: activeTab.id,
              editor: { filePath: path },
            })
          })
        })

.then(() => {
      const activeTabGroup = TabStore.getState().activeTabGroup
      const existingTabs = TabStore.findTab(
        tab => tab.file && tab.file.path === path && (tab.tabGroup === activeTabGroup || allGroup)
      )
      if (existingTabs.length) {
        const existingTab = existingTabs[0]
        if (editor.gitBlame) {
          existingTab.editor.gitBlame = editor.gitBlame
        }
        existingTab.activate()
        if (callback) callback()
      } else {
        TabStore.createTab({
          icon: icons.getClassWithColor(path.split('/').pop()) || 'fa fa-file-text-o',
          editor: {
            ...editor,
            filePath: path,
          },
          ...others
        })
        if (callback) {
          callback()
        }
      }
    })
}

render() {
        const {fileName, pattern, path, results} = this.props;
        const resultSize = results.length;
        const iconStr = 'file-icon ' + (icons.getClassWithColor(path) || 'fa fa-file-text-o');
        return (
            <div>
                <div>
                <i>
                <i>
                {fileName}
                <span>{path}</span>
                <span>{resultSize}</span>
                </i></i></div><i><i>
        
                {</i></i></div>

const filename =
      isGitHub && isMobile
        ? getGitHubMobileFilename(filenameDoms[i])
        : filenameDoms[i].innerText.trim();

    const iconDom = isGitHub
      ? iconDoms[i].querySelector('.octicon')
      : iconDoms[i];

    const isDirectory =
      iconDom.classList.contains('octicon-file-directory') ||
      iconDom.classList.contains('fa-folder');

    const className = colorsDisabled
      ? fileIcons.getClass(filename)
      : fileIcons.getClassWithColor(filename);

    const darkClassName = darkMode ? 'dark' : '';

    if (className && !isDirectory) {
      const icon = document.createElement('span');

      if (isGitHub) {
        icon.className = `icon octicon ${className} ${darkClassName}`;
        icon.style.opacity = 1;
      } else {
        icon.className = `${className} ${darkClassName}`;
        icon.style.marginRight = host === 'bitbucket' ? '10px' : '3px';
      }

      iconDom.parentNode.replaceChild(icon, iconDom);
    }

protected getFileIcon(uri: URI): string | undefined {
        const fileIcon = fileIcons.getClassWithColor(uri.displayName);
        if (!fileIcon) {
            return undefined;
        }
        return fileIcon + ' theia-file-icons-js';
    }

FileStore.fetchPath(node.path)
        .then(data => FileStore.loadNodeData(data))
        .then(() => toggleNodeFold(node, shouldBeFolded, deep))
        .then(() => {
          node.isLoaded = true
          node.isLoading = false
        })
    } else {
      toggleNodeFold(node, shouldBeFolded, deep)
    }
  } else if (getTabType(node) === 'TEXT') {
    dispatchCommand('file:open_file', { path: node.path, editor })
  } else {
    TabActions.createTab({
      title: node.name,
      icon: icons.getClassWithColor(node.name) || 'fa fa-file-text-o',
      editor: {
        ...editor,
        filePath: node.path,
      },
    })
  }
}
export const openNode = registerAction('filetree:open_node',

$items.each((index, item) => {
      const $item = $(item);
      const isFile = $item.find('.octicon-file').length > 0
      const isSvg = $item.find('.octicon-file-text').length > 0;
      const name = $item.find('.js-navigation-open').text();
      const $icon = $item.find('.icon');

      if (isFile || isSvg) {
          let className;
          if (isColor) {
            className = fileIcons.getClassWithColor(name) || DEFAULT_ICON;
          } else {
            className = fileIcons.getClass(name) || DEFAULT_ICON;
          }
          $icon.addClass(`gfi ${className}`);

          if (isSvg) {
            $item.find('svg').remove()
          }
      }
    });
  });