Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v2): allow import SVG images #2764

Merged
merged 1 commit into from
May 18, 2020
Merged

feat(v2): allow import SVG images #2764

merged 1 commit into from
May 18, 2020

Conversation

lex111
Copy link
Contributor

@lex111 lex111 commented May 17, 2020

Motivation

As a React-centric static site generator, we should definitely enable the import of SVG images into React components.

Currently when trying to import SVG there will be an expected error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

This PR also resolve #2726. Note: I don’t think we need to support the CRA format for SVG (import {ReactComponent as SVG}), because this can be done in custom plugin by user itself.

Importing images of other extensions (jpg, png etc) is a rather difficult task due to the using of docusaurus-plugin-ideal-image plugin, although it may not be necessary right now.

test: /\.(png|jpe?g|gif)$/i,
use: [
'@docusaurus/lqip-loader',
{
loader: '@endiliey/responsive-loader',
options: {
emitFile: !isServer, // don't emit for server-side rendering
disable: !isProd,
// eslint-disable-next-line
adapter: require('@endiliey/responsive-loader/sharp'),
name: isProd
? 'ideal-img/[name].[hash:hex:7].[width].[ext]'
: 'ideal-img/[name].[width].[ext]',
...options,
},

In any case, SVG images is very often used in React components and we need to add support for it.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

In any React component (page or MDX document) import a SVG and try to use it, eg:

import Logo from '@site/static/img/docusaurus.svg';

<Logo title="Docusaurus logo" className="logo" />

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: new feature This PR adds a new API or behavior. label May 17, 2020
@lex111 lex111 requested a review from yangshun as a code owner May 17, 2020 21:55
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label May 17, 2020
@docusaurus-bot
Copy link
Contributor

Deploy preview for docusaurus-2 ready!

Built with commit 1840b25

https://deploy-preview-2764--docusaurus-2.netlify.app

Copy link
Contributor

@yangshun yangshun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I think we have to add it to our CHANGELOG as a breaking change in case people have added their own loaders, this will conflict.

@yangshun yangshun added the pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. label May 18, 2020
@yangshun yangshun merged commit 8e24454 into master May 18, 2020
@yangshun yangshun deleted the lex111/import-svg branch May 18, 2020 03:18
@lex111 lex111 added this to the v2.0.0-alpha.55 milestone May 19, 2020
@EthanSK
Copy link

EthanSK commented May 27, 2020

Why not png, jpg, and every other image type? I'm getting some webpack loader issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Error with SVGs and Images from an imported library
5 participants