Skip to content

Add cursor (.cur) format to build-in assets type list #18679

@otomad

Description

@otomad

Description

It is useful when you want to use your own cursor file in the CSS cursor property.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Suggested solution

Add "cur" type in

// images
declare module '*.apng' {
const src: string
export default src
}
declare module '*.bmp' {
const src: string
export default src
}
declare module '*.png' {
const src: string
export default src
}
declare module '*.jpg' {
const src: string
export default src
}
declare module '*.jpeg' {
const src: string
export default src
}
declare module '*.jfif' {
const src: string
export default src
}
declare module '*.pjpeg' {
const src: string
export default src
}
declare module '*.pjp' {
const src: string
export default src
}
declare module '*.gif' {
const src: string
export default src
}
declare module '*.svg' {
const src: string
export default src
}
declare module '*.ico' {
const src: string
export default src
}
declare module '*.webp' {
const src: string
export default src
}
declare module '*.avif' {
const src: string
export default src
}

// images
'apng',
'bmp',
'png',
'jpe?g',
'jfif',
'pjpeg',
'pjp',
'gif',
'svg',
'ico',
'webp',
'avif',

Alternative

No response

Additional context

Usage

import myFancyCursor from "src/assets/cursors/my_fancy_cursor.cur";

const ComponentWithFancyCursor = styled.div`
    cursor: url("${myFancyCursor}"), default;
`;

In fact, I'd like to add the animated cursor (.ani) format as well, which unfortunately doesn't seem to be supported by CSS.

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions