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

1. Install dependencies: recommend to the latest version

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

2. 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

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

👨‍💻 Update Records

[email protected]: latest

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

[email protected]:

• 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

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