`Feature Request`: Add More SVG Components (`g`, `use` ) for Enhanced SVG Support

[mg3994]

Feature Request: Add More SVG Components (g, use) for Enhanced SVG Support

Package: jaspr_svg

Description:

We would like to request the addition of more SVG components to the jaspr_svg package, specifically g and use components, for better SVG manipulation and usage in jaspr. These components will enable users to define and utilize more complex SVG structures within their applications.

Rationale:

Currently, the jaspr_svg package is missing components like g and use, which are fundamental to creating reusable and nested SVGs. By adding these components, users can leverage aria-hidden, fill, and other SVG attributes more effectively. Additionally, this would make it easier to manage reusable SVG elements, such as referencing href attributes within <use> tags.

Example Use Case:

These components would enable developers to do something like this:

svg(
  classes: 'black',
  width: 170.px,
  height: 170.px,
  viewBox: "0 0 170 170",
  attributes: {'fill': 'none'},
  children: [
    use(href: '#king', attributes: {'aria-hidden': '', 'fill': 'none'}),
  ]
);

Proposed Components:

1. g Component:

This component would wrap multiple child SVG elements, typically for grouping purposes.

import 'package:jaspr/jaspr.dart';

Component g(List<Component> children,
    {Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'g',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
    },
    events: events,
    children: children,
  );
}

2. use Component:

This component would allow for reusing an existing SVG element, identified via the href attribute.

import 'package:jaspr/jaspr.dart';

Component use(
    {required String href,
    List<Component>? children,
    Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'use',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
      'href': href,
    },
    events: events,
    children: children ?? [],
  );
}

Benefits:

• Better SVG Support: These components enable easy grouping and reusability of SVG elements.
• Enhanced Customization: Supports additional SVG-specific attributes like aria-hidden, fill, and others.
• mproved Reusability: The use component allows developers to reference SVGs with href, making it easy to reuse graphics or icons without code duplication.

We believe adding these components will significantly improve the utility of `jaspr_svg` for developers working with complex SVGs.
Thank you for considering this feature request!

Full Example :

Example