File-icons-vue NPM

file-icons-vue

file-icons-vue, a file icons npm package for Vue projects
Author: zyyzyykk
Source Code: https://github.com/zyyzyykk/file-icons-vue
Npm Address: https://www.npmjs.com/package/file-icons-vue
Update Time: 2025-01-19

⚡ Quick Importing

Install dependencies: recommend to the latest version

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

Import components in the 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

Preview

💡 Function Description

1.file-icons-vue is a component used to display icons corresponding to file suffixes, which has been packaged and published in the npm repository. file-icons-vue provides a rich set of icons, including common file types and extensions, to enhance the visualization of Vue projects

2.The props parameters received by the component:

Parameter	Type	Meaning	Description
name	String	Full file name	Must be transmitted
width	Number	Icon width (px)	Default value is 20 (px)
height	Number	Icon height (px)	Default value is 20 (px)
iconStyle	Object	File Icon custom style	The width and height attributes in the object do not take effect
linkStyle	Object	File Iink custom style	The width and height attributes in the object do not take effect
itemStyle	Object	Icon parent element custom style	The width and height attributes in the object do not take effect
style (deprecated)	Object	Icon parent element custom style	The width and height attributes in the object do not take effect
isFolder	Boolean	Is it a folder	Default value is false
isMulti	Boolean	Is it multiple files	Default value is false
isLink	Boolean	Is it linked file	Default value is false