facebook / facebook/docusaurus

Inline SVGs text font-family is removed when rendering.

Open
#10,537 2 comments 0 reactions 0 assignees View on GitHub
bug external
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [X] I have tried the `npm run clear` or `yarn clear` command.
- [x] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).

### Description

I'm using inline SVGs to render a SVG with customized font-family. But the font-family is not right when rendering. I checked the rendered inline SVG and the original one, found the `font-family` is removed.

image
image

### Reproducible demo

_No response_

### Steps to reproduce

1. Customize font-family in a SVG.
2. Render it via inline SVG.
3. tada

### Expected behavior

The font-family property should be reserved.

### Actual behavior

The font-family property is removed.

### Your environment

- Public source code:
- Public site URL:
- Docusaurus version used:
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):

### Self-service

- [ ] I'd be willing to fix this bug myself.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.