├── .babelrc.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── docs
├── index.mdx
├── logo.svg
├── preview.png
└── style.css
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── css
│ ├── colors.less
│ ├── functions.less
│ ├── style.less
│ ├── utils.less
│ └── vars.less
├── index.js
└── js
│ └── FileIcon.jsx
└── webpack.config.js
/.babelrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "presets": [
3 | ["@babel/preset-env", {
4 | "useBuiltIns": "usage",
5 | "modules": false,
6 | }],
7 | ["@babel/preset-react"],
8 | ],
9 | };
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | lib
4 | dist
5 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | src
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 Drawbotics
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # File Icons
4 | ```bash
5 | npm install @drawbotics/file-icons
6 | ```
7 | A simple library to display icons depending on the file type. The library can be used both by importing the stylesheet (useful if you have a simple project without React dependencies), and also exports a React component.
8 |
9 | **DISCLAIMER**
10 | In order to have a _single div_ usage, and given the complexity of the icon look, a lot of CSS features that may not be compatible with older browsers is used. Namely `linear-gradient`, `border-image` and `clip-path`. Nonetheless, all the styles are prefixed.
11 |
12 | ## Usage
13 | There are two ways to use the icons: with a simple `div` or with a React component. Either way, you should include the stylesheet to have the icons style:
14 | ```
15 | @import '~@drawbotics/file-icons/dist/style.css';
16 | ```
17 |
18 | #### Pure CSS
19 | You can use `file-icons` just by importing the css styling and using a `div` as a base element. Add the class `file-icon` to your div and set the file type as a data attribute `data-file`:
20 | ```html
21 |
22 | ```
23 | **Note**: The file extension needs to be in lower case.
24 |
25 | You can also pass different class names for different sizes:
26 | ```html
27 |
28 |
29 | ```
30 |
31 |
32 |
33 | Example icons with default, medium and large sizing.
34 |
35 | #### React
36 | You can import the component anywhere in your code through:
37 | ```js
38 | import { FileIcon } from '@drawbotics/file-icons';
39 | ```
40 | If you use CSSinJS then don't forget to include the stylesheet if you haven't already
41 | ```js
42 | import '@drawbotics/file-icons/dist/style.css';
43 | ```
44 |
45 | And use it like such:
46 | ```js
47 |
48 | ```
49 |
50 | Here are the different options you can pass:
51 |
52 | Prop | Type | Description | Possible values
53 | --- | --- | --- | ---
54 | `file` | String | File extension without the dot | `.doc`
55 | `size` | String | To toggle between the 3 sizes | `medium`, `large`
56 | `filename` | String | If you don't want to extract the extension yourself you can pass the filename directly | `my-document.pdf`
57 |
58 | When using the React component you don't need to worry if the extension/filename is lowercase, the component takes care of that.
59 |
60 | #### Supported file types
61 | Any file extension that does not match the ones included with the library will fallback to the default grey color. Each category has its own color. The supported extension is a subset of the provided value, meaning that `docx` is supported since we look for `doc`.
62 |
63 | Category | Possible values
64 | --- | ---
65 | Archives | `zip`, `rar`, `tar`, `dmg`, `jar`
66 | 3D Files | `3ds`, `dwg`, `obj`, `dae`, `skp`, `fbx`
67 | Text Documents | `doc`, `rtf`, `txt`, `odt`, `tex`,
68 | Vector graphics | `ai`, `svg`
69 | PDF | `pdf`
70 | Data | `xml`, `csv`, `xls`
71 | Images | `jpg`, `gif`, `png`, `jpeg`, `tif`, `psd`, `raw`
72 | Video | `webm`, `mkv`, `avi`, `mov`, `m4v`, `mpeg`, `mp4`
73 | Audio | `mp3`, `m4a`, `ogg`, `acc`, `flac`
74 |
75 | If you want to add support for an extension, or support a new category of files don't hesitate to submit a PR. More extensions and categories will be added through time.
76 |
77 | ## Develop
78 | ```bash
79 | npm install
80 | ```
81 | To run examples
82 | ```bash
83 | npm run build:watch # for build step
84 | npm run example # to serve examples
85 | ```
86 |
87 | To build for production
88 | ```bash
89 | npm run build
90 | ```
91 |
92 |
93 | ## License
94 | MIT. See [LICENSE](LICENSE) for details.
95 |
--------------------------------------------------------------------------------
/docs/index.mdx:
--------------------------------------------------------------------------------
1 | import { PlayGround, Knobs, PropsTable } from 'react-display-window/lib/components';
2 |
3 | import './style.css';
4 |
5 | import '../dist/style.css';
6 | import { FileIcon } from '../dist/file-icons.js';
7 |
8 |
9 | ## Pure CSS Example
10 |
11 |
12 |
2 |
3 | # File Icons
4 | ```bash
5 | npm install @drawbotics/file-icons
6 | ```
7 | A simple library to display icons depending on the file type. The library can be used both by importing the stylesheet (useful if you have a simple project without React dependencies), and also exports a React component.
8 |
9 | **DISCLAIMER**
10 | In order to have a _single div_ usage, and given the complexity of the icon look, a lot of CSS features that may not be compatible with older browsers is used. Namely `linear-gradient`, `border-image` and `clip-path`. Nonetheless, all the styles are prefixed.
11 |
12 | ## Usage
13 | There are two ways to use the icons: with a simple `div` or with a React component. Either way, you should include the stylesheet to have the icons style:
14 | ```
15 | @import '~@drawbotics/file-icons/dist/style.css';
16 | ```
17 |
18 | #### Pure CSS
19 | You can use `file-icons` just by importing the css styling and using a `div` as a base element. Add the class `file-icon` to your div and set the file type as a data attribute `data-file`:
20 | ```html
21 |
22 | ```
23 | **Note**: The file extension needs to be in lower case.
24 |
25 | You can also pass different class names for different sizes:
26 | ```html
27 |
28 |
29 | ```
30 |
31 | 
32 |
33 | Example icons with default, medium and large sizing.
34 |
35 | #### React
36 | You can import the component anywhere in your code through:
37 | ```js
38 | import { FileIcon } from '@drawbotics/file-icons';
39 | ```
40 | If you use CSSinJS then don't forget to include the stylesheet if you haven't already
41 | ```js
42 | import '@drawbotics/file-icons/dist/style.css';
43 | ```
44 |
45 | And use it like such:
46 | ```js
47 |