file-icons-vue

file-icons-vue, a npm package that provides file icons for Vue.js projects

Author: zyyzyykk

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

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

Update Time: 2024-11-01

English ｜ 简体中文

⚡ Quick Importing

1.Installation dependencies: recommended to install the latest version

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

2.Importing components in the Vue3 project:

<template>
  <FileIcons 
     name="text.txt" :width="30" :height="30" 
     :isFolder="false" :isMulti="false" :isLink="false" 
     :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

💡 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 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
style	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

👨‍💻 Update Records

[email protected]: latest

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

[email protected]:

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

[email protected]:

Add isMulti attribute, supporting multi file display

[email protected]:

Add .dot、.env、.mk、.tgz icons

History Update Records

🏘️ About this project

Author: zyyzyykk

Welcome to provide valuable opinions or suggestions on this project, and you can also join us in maintaining and developing this project together