https://github.com/kossnocorp/defile
🌚 Converts assets (images, audio, video, etc.) into components 🌝
https://github.com/kossnocorp/defile
Last synced: 15 days ago
JSON representation
🌚 Converts assets (images, audio, video, etc.) into components 🌝
- Host: GitHub
- URL: https://github.com/kossnocorp/defile
- Owner: kossnocorp
- Created: 2017-07-19T15:12:07.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-19T15:28:43.000Z (almost 8 years ago)
- Last Synced: 2025-03-29T01:34:43.894Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 24
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# defile
**defile** converts files (images, audio, video, etc.) into React/Preact components.
## Installation
If you want to use defile with **webpack**, install [defile-loader]:
```bash
npm install defile-loader --save-dev
# or
yarn add --dev defile-loader
```
To use the low-level API, or to manage the core library version, install `defile`:
```bash
npm install defile --save
# or
yarn add defile
```
## Configuration
```js
// ...
{
test: /\.(jpg|png|gif|svg)?$/,
use: [
{
loader: 'defile/react', // 👈 Add loader (use 'defile/preact' for Preact)
query: {
tag: 'img', // 👈 The tag name ('audio', 'video', 'track', etc.)
prop: 'src', // 👈 The prop name used for the file path
defaultProps: { alt: 'TODO' } // 👈 Default props passed to the element
}
}
'file' // 👈 file-loader must precede defile-loader
],
// or if you prefer classic:
loader: 'defile/react?{defile/preact?{tag: "img", prop: "src", defaultProps: {alt: "TODO"}}!file'
},
// ...
```
## Usage
See [low-level API docs](https://github.com/kossnocorp/defile/blob/master/index.js) for more implementation details.
### React
```javascript
import React from 'react'
import Cats from './cats.jpg'
export default function () {
return (
Take a look at my cats:
)
}
```
### Preact
```javascript
import { h } from 'preact'
import Cats from './cats.jpg'
export default function () {
return (
Take a look at my cats:
)
}
```
## Related
- [decss]: the source of inspiration.
- [defile-loader]: defile webpack loader source code.
## License
[MIT © Sasha Koss](https://kossnocorp.mit-license.org/)
[decss]: https://github.com/kossnocorp/decss
[defile-loader]: https://github.com/kossnocorp/defile-loader