vite icon indicating copy to clipboard operation
vite copied to clipboard

fix: svg file as a react component attribute types

Open danialdezfouli opened this issue 2 years ago • 0 comments

Description

while using svg files as react components, it's impossible to use HTML attributes in the component while using typescript.

I have made this change inspired by what next.js is doing in here: https://github.com/vercel/next.js/blob/canary/packages/next/image-types/global.d.ts

Additional context

import Icon from "assets/icons/icon.svg";
<Icon style={{ fontSize: "16px" }} />;

Error:

Type '{ style: { fontSize: string; }; }' is not assignable to type 'IntrinsicAttributes'. 
Property 'style' does not exist on type 'IntrinsicAttributes'.

Project Setup:

    "@vitejs/plugin-react": "^2.0.0",
    "vite": "^3.0.0",
    "react": "^18.2.0",
    "typescript": "^4.6.4"

What is the purpose of this pull request?

  • [x] Bug fix
  • [ ] New Feature
  • [ ] Documentation update
  • [ ] Other

Before submitting the PR, please make sure you do the following

  • [x] Read the Contributing Guidelines.
  • [ ] Read the Pull Request Guidelines and follow the Commit Convention.
  • [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • [ ] Ideally, include relevant tests that fail without this PR but pass with it.

danialdezfouli avatar Jul 30 '22 16:07 danialdezfouli