Skip to content

Commit

Permalink
Merge pull request #6 from levelsoftware/feature/customizable-icons
Browse files Browse the repository at this point in the history
feature: Ability to customize icons; avoid large icon dependency
  • Loading branch information
TimboKZ authored Jan 22, 2020
2 parents ac415f5 + 5158fa1 commit b175f8e
Show file tree
Hide file tree
Showing 20 changed files with 3,874 additions and 526 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@
/node_modules
/umd
npm-debug.log*
.vscode
File renamed without changes.
95 changes: 95 additions & 0 deletions docs/markdown/7-Icons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
Default icons are selected from [Font Awesome](https://fontawesome.com/) for controls and file types. These icons can be customized in two different ways:

### Custom Icon Map

You can pass a map to override the default icons with alternatives from Font Awesome. You'll need to install the Font Awesome package that contains your desired icon.

```bash
npm install @fortawesome/free-brands-svg-icons
```

Then, pass your map with overrides to `FileBrowser`.

```js
import { faCodepen } from '@fortawesome/free-brands-svg-icons';

<FileBrowser icons={{ code: faCodepen }}>
```

### Custom Icon Component w/ Map

You can implement a whole new `Icon` component to render icons, that accepts icons from your custom map of icons. Remember that by default, the map will contain Font Awesome ligatures. Your `Icon` component should implement the following `IconProps` props, based on a subset of `FontAwesomeIcon`.

```typescript
export interface IconProps {
icon: any;
spin?: boolean;
className?: string;
color?: string;
fixedWidth?: boolean;
size?: 'xs' | 'lg' | 'sm';
style?: CSSProperties;
}
```

You can then pass your icon component to the FileBrowser:

```javascript
<FileBrowser icons={{ code: faCodepen }} Icon={MyIconComponent}>
```

Your icon component will be called wherever an icon exists in the UI:

```javascript
<Icon icon={icons.code} />
```

### Available Icons

- checkActive
- checkInactive
- desc
- asc
- list
- folder
- folderCreate
- folderOpen
- smallThumbnail
- largetThumbnail
- angleRight
- angleDown
- download
- upload
- trash
- directoryUp
- fallbackIcon
- symlink
- hidden
- loading
- file
- license
- code
- config
- model
- database
- text
- archive
- csv
- image
- pdf
- word
- video
- info
- key
- lock
- music
- flash
- terminal
- authors
- adobe
- git
- linux
- nodejs
- php
- python
- ubuntu
Loading

0 comments on commit b175f8e

Please sign in to comment.