pmcalmeida / preact-cli-svg-loader Goto Github PK

Removes svg extension file-loader, url-loader and raw-loader and use preact-svg-loader to load svg file as preact components in preact-cli

License: MIT License

JavaScript 100.00%

preact-cli-svg-loader's Introduction

Hi there 👋

preact-cli-svg-loader's People

Contributors

Stargazers

Watchers

Forkers

dracomithril vorobey rodrigojuliano

preact-cli-svg-loader's Issues

Usage example

It'd be nice if the README had a code sample for how to import an SVG using this loader in a project created with Preact CLI.

In other blogs/articles, I'm seeing this sort of syntax:

import { ReactComponent as Tree } from '../images/tree.svg'

But it looks like instead this library allows for a default import, e.g.

import Tree from '../images/tree.svg'

Also, might be worth clarifying how to get it to work with Typescript. There's probably a better way, but this works:

// declaration.d.ts
declare module '*.svg' {
  const content: FunctionComponent;
  export default content;
}

Just figured this would help others coming from React. Thanks!

bug with preactCliSvgLoader

export default (config, helpers) => {
  preactCliSvgLoader(config, helpers);
  config.resolve.alias = {
    ...config.resolve.alias,
    "~@": resolve(__dirname, "src"),
    image: resolve(__dirname, "src/assets/img"),
  };
  config.node.process = true;
  return config;
};