THREE SVG to MeshLine - Filling shapes - svg

Question

I'm attempting to load SVGs that are already in the DOM into a THREE.js scene
This is an example of an SVG I have
And this is how it is showing in the scene
I'm attempting to use THREE.SVGLoader and THREE.MeshLine to display the icons.
Here is the HTML for that SVG
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="FiDownload" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
And this is how I'm doing it
const loader = new THREE.SVGLoader()
const svg = loader.parse(el.outerHTML)
const material = new THREE.MeshLineMaterial({
color: new AFRAME.THREE.Color(this.data.color),
resolution: new AFRAME.THREE.Vector2 ( window.innerWidth, window.innerHeight ),
sizeAttenuation: 0,
lineWidth: 2,//this.data.lineWidth,
opacity: 1,//this.data.opacity,
transparent: true,
//near: 0.1,
//far: 1000
});
svg.paths.forEach((path, i) => {
const shapes = path.toShapes(true);
shapes.forEach((shape, j) => {
const geometry = new AFRAME.THREE.ShapeGeometry(shape);
const mesh = new AFRAME.THREE.Mesh(geometry, material);
this.el.object3D.add(mesh)
});
});
I get the error:
THREE.DirectGeometry: Faceless geometries are not supported.
Can anyone suggest a way to get the icon SVGs to render properly in THREE?

Answer 1

I used a LineGeometry
svg.paths.forEach((path, i) => {
const shapes = path.toShapes(true);
shapes.forEach((shape, j) => {
//#ts-ignore
const line = new AFRAME.THREE.MeshLine();
const geometry = new AFRAME.THREE.Geometry();
shape.extractPoints().shape.forEach(vec2 => {
geometry.vertices.push(new AFRAME.THREE.Vector3(vec2.x, vec2.y, 0))
})
line.setGeometry( geometry )
const mesh = new AFRAME.THREE.Mesh(line.geometry, this.material)
this._shapes.push(mesh)
this.el.object3D.add(mesh)
});
});