Closed ande4485 closed 7 months ago
This is the SVG icon component I use which works in a normal app:
import 'package:janostr/app/utils.dart';
import 'package:jaspr/html.dart';
class SvgIcon extends StatelessComponent {
final String d;
final String color;
const SvgIcon(this.d, {Key? key, this.color = ''}) : super(key: key);
@override
Iterable<Component> build(BuildContext context) sync* {
yield DomComponent(
tag: 'svg',
classes: tw('w-6 h-6 $color'),
attributes: {
'xmlns': 'http://www.w3.org/2000/svg',
'fill': 'none',
// 'viewBox': '0 0 24 24',
'stroke-width': '1.5',
'stroke': 'currentColor',
},
child: DomComponent(
tag: 'path',
attributes: {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'd': d,
},
),
);
}
}
tw()
is just creating a Tailwind class array from the given input string. Though, even after removing the Tailwind stuff I can't get it to work in JasprPad either. So it might be a JasprPad thing.
@fusion44 , I try your code in temporary jsapr project and nothing is displayed in my navigator when I run jsapr serve. I try :
yield DomComponent(
tag: 'svg',
attributes: {
'xmlns': 'http://www.w3.org/2000/svg',
'fill': 'none',
// 'viewBox': '0 0 24 24',
'stroke-width': '1.5',
'stroke': 'currentColor',
'height': '300',
'width': '300',
},
child: DomComponent(
tag: 'rect',
attributes: {'width': '100%', 'height': '100%', 'fill': 'green'}),
);
I use jsapr 0.9.2 . And do you have a value for d variable in your example ? Thank you
Sure, here's what I currently use:
// https://heroicons.com
class HeroIconData {
static const envelope =
'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75';
static const home =
'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25';
static const info =
"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z";
static const wrenchScrewdriver =
'M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z';
static const user =
'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z';
}
@fusion44 , I really don't understand, if I use your code, nothing appears. What version of jaspr do you use ? Jaspr doctor for me: [✓] Jaspr CLI (Version 0.9.2) • Dart Version 3.1.3 (stable) (Tue Sep 26 14:25:13 2023 +0000) on "macos_arm64" at dart • Running on macos Version 14.0 (Build 23A344) - Locale fr-FR • Analytics: Enabled
[✓] Current Project • Dependencies on core packages: • jaspr: ^0.9.1 • Uses server-side rendering: false • Uses experimental compilers: false • Uses flutter embedding: false
Description
I create a DomComponent with 'svg' tag and a basic inside it and nothing appears when I run project.
Steps To Reproduce
In JasprPad, copy this :
Doctor Output
I can't because I use JasprPad
Expected Behavior
Svg is showing on the web page.
Additional Context
I saw