feat(v2): allow import SVG images

[lex111]

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.

docusaurus/packages/docusaurus-plugin-ideal-image/src/index.ts

Lines 28 to 42 in 463efec

	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.)

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 1840b25

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

[yangshun]

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.

[EthanSK]

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