file-icons-vue

file-icons-vue

A file icons package for Vue3 projects

Author: zyyzyykk

Source Code: https://github.com/zyyzyykk/file-icons-vue

Npm Address: https://www.npmjs.com/package/file-icons-vue

Update Time: 2026-06-20

⚡ Quick Usage

1. Install the latest version package

# all icons
npm i file-icons-vue
# common icons
npm i file-icons-vue-min

2. Import the component in your Vue3 project

<template>
  <FileIcons 
     name="text.txt" :width="30" :height="30" 
     :isFolder="false" :isMulti="false" :isLink="false" 
     :itemStyle="{display: 'flex', alignItems: 'center'}" 
     :iconStyle="{opacity: 0.5}" 
  />
</template>

<script>
// import file icon component
import FileIcons from 'file-icons-vue';

export default {
  name: 'App',
  components: {
    FileIcons
  }
}
</script>

<style>
</style>

👀 Preview

💡 Parameter Description

👨‍💻 Update Records

file-icons-vue@1.3.5: latest

• Optimize the code logic and documentation

file-icons-vue@1.3.4:

• Add itemStyle attribute instead of style attribute
• Add .hh、.xaml、.xsd、.xslt icons, Modify .xsl icon

file-icons-vue@1.3.2:

• Add iconStyle、linkStyle attribute, Modify the meaning of style attribute

file-icons-vue@1.3.1:

• Add isLink attribute, supports displaying reference type files
• Remove duplicate icons and reduce packaging volume
• Modify .html icon