This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-09-07
Channels
- # announcements (1)
- # babashka (28)
- # beginners (212)
- # calva (13)
- # clara (3)
- # clj-kondo (39)
- # cljsrn (1)
- # clojure (16)
- # clojure-australia (1)
- # clojure-europe (11)
- # clojure-nl (2)
- # clojure-spec (9)
- # clojure-uk (8)
- # clojurescript (66)
- # cloverage (3)
- # code-reviews (16)
- # cursive (12)
- # data-science (2)
- # datomic (118)
- # events (1)
- # garden (2)
- # improve-getting-started (1)
- # introduce-yourself (1)
- # jobs (4)
- # missionary (5)
- # numerical-computing (1)
- # off-topic (5)
- # pathom (3)
- # polylith (71)
- # re-frame (99)
- # reagent (17)
- # remote-jobs (5)
- # shadow-cljs (35)
- # tools-deps (5)
- # xtdb (4)
Hei guys, what is the fastest way to import svgs? Let's say an svg exported from figma. How do you convert it to hiccup style? I tried to manually “translate” from jsx to hiccup but it doesn't really work
> How do you convert it to hiccup style? Just don't. SVGs are not JSX, they're are valid HTML entities. You can embed them via e.g. "dangerously set HTML" (don't recall the exact name and usage of it in React).
You https://github.com/status-im/status-react/blob/a1d55f30bb584c7659c9906a9cea3c1008591989/components/src/status_im/ui/components/svg.clj with a macro. Then define the https://github.com/status-im/status-react/blob/8aa16520c643ad9e20faaf8526b0d735d588c732/src/status_im/ui/components/icons/vector_icons.cljs#L23-L29to use, for web will be the keyword (def svg :svg)
then set https://github.com/status-im/status-react/blob/8aa16520c643ad9e20faaf8526b0d735d588c732/src/status_im/ui/components/icons/vector_icons.cljs#L132. Or you can modify the macro to set directly keyword instead of symbols.
Another option is to parse the svg with the hickory library and then output to svg https://github.com/davidsantiago/hickory
Hi all, Is it possible to use a static SVG file like a component in reagent for example in React you can do:
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
Not like that. But in a somewhat similar way. This page describes how it can be done with shadow-cljs, but you can easily adapt the solution to any other tool: https://clojureverse.org/t/using-none-code-resources-in-cljs-builds/3745
Right, that you cannot do - for that you'd need to parse it as Hiccup at compile time, modify it (probably at run time), and then use as Hiccup.
I have this code in one of my projects.
(ns my.proj.svg
(:require [hickory.core :refer [parse-fragment as-hiccup]]
[ :as io]))
(defn- update-viewbox-attr [attrs]
(if-some [[_ vb] (find attrs :viewbox)]
(-> attrs
(assoc :view-box vb)
(dissoc :viewbox))
attrs))
(defmacro embed-svg [path attrs]
(assert (string? path))
(let [svg-vec (-> (io/resource path)
slurp
parse-fragment
first
as-hiccup
(update 1 update-viewbox-attr))]
`(update ~svg-vec 1 merge ~attrs)))
@U01JA0VU7P0 ^ in case you need to change the attributes as well.
And then use it as just
[:div {:class :some-container-thats-just-for-demonstration-but-is-not-needed}
(embed-svg "resources/item.svg" {:class-name :item
:width 150})]
you could make a jsx/tsx file that exports your svg component and import it into your clojurescript project and use it with adapt-react-class (`:>`) like
-- foo.jsx --
export const Foo = () => {
return (
<div className="App">
<svg>
..........
</svg>
</div>
);
}
-- foo.cljs --
(require '["js/foo" :refer [Foo]])
(defn view
[]
[:> Foo {:some-props ...
you need to use babel or something to convert the jsx/tsx and write it to js/foo.js
(in my example), or if you don’t want to do that you can just write a plain js file yourself and import it straight away, but you’d need to do the React.createElement stuff and not use jsxThis technique is much more useful if you already have jsx files you want to use though, if you just want to use an svg its probably not the best solution
whats the best practice to capture a form submit in reagent?
:thumbsup: