svg-lib icon indicating copy to clipboard operation
svg-lib copied to clipboard

Question : local icons

Open deb75 opened this issue 2 years ago • 15 comments

Hello,

I retrieved icon collections and set svg-lib-icon-collections like this :

(use-package svg-lib
  :config
  (setq svg-lib-icon-collections
        (list (list "simple" (concat (expand-file-name user-emacs-directory) "icons/simple/7.1.0/%s.svg"))
              (list "material" (concat  (expand-file-name user-emacs-directory) "icons/simple/6.7.96/%s.svg"))
              (list "octicons" (concat  (expand-file-name user-emacs-directory) "icons/octicons/17.3.0/%s-24.svg"))
              (list "boxicons" (concat  (expand-file-name user-emacs-directory) "icons/boxicons/2.1.2/regular/bx-%s.svg")))))

Then, if I ask for an icon :

(svg-lib-icon "sun" nil :collection "octicons" :scale 2)

I get the error :

Debugger entered--Lisp error: (wrong-type-argument stringp ("c:/Users/xxx/.emacs.d/icons/octicons/17..."))
  svg-lib--icon-get-data("octicons" "sun")
  svg-lib-icon("sun" nil :collection "octicons" :scale 2)
  (progn (svg-lib-icon "sun" nil :collection "octicons" :scale 2))
  elisp--eval-last-sexp(t)
  eval-last-sexp(t)
  eval-print-last-sexp(nil)
  funcall-interactively(eval-print-last-sexp nil)
  command-execute(eval-print-last-sexp)

I looked into the code, it seems that a valid url is required, not a local file.

Should it be possible to enable local files ?

That is mandatory for me because I am behind a firewall that does not let emacs connect to internet.

The cache mechanism is close to that, but that would require to change the names of icons (hundreds of them)

Regards

deb75 avatar Jun 24 '22 21:06 deb75

It might be possible as long as there is a directory with a regular naming scheme (such as online collection). I think the svg-lib--icon-get-data would need to be modified and check first if the url is a url or a directory.

rougier avatar Jun 25 '22 16:06 rougier

This is sorta working for me...

(require 'svg-lib)

(add-to-list 'svg-lib-icon-collections
             (cons "local" "file:///home/trevdev/Pictures/%s.svg"))

(insert-image
 (svg-lib-icon "mjolnir" '(:collection "local" :background "#FFCA41")))

All I'm getting, however, is a yellow rectangle:

image

Here's the sample image: mjolnir

It is set to 500x500. I set the scale to 0.10, but it still doesn't render properly.

trev-dev avatar Jul 27 '22 21:07 trev-dev

What do you get for SVG when the library retrieves the local icon ? A test would be to have a local (partial) copy of an oline library and check whether you can render the icon using the distant vs local version.

rougier avatar Aug 08 '22 15:08 rougier

I'm not sure who you're speaking to, but in my case, it's only 1, local icon.

trev-dev avatar Aug 08 '22 17:08 trev-dev

@trev-dev I was speaking to you, sorry for the confusion. My question is whether a SVG tag that i using online repo is working and does it break if you use the same on the local repo?

rougier avatar Aug 08 '22 17:08 rougier

@rougier Yeah, it kinda does. I don't know where the weird border is coming from but the icon seems to be there.

(require 'svg-lib)

(add-to-list 'svg-lib-icon-collections
             (cons "local" "file:///home/trevdev/Projects/simple-icons/icons/%s.svg"))

(insert-image
 (svg-lib-icon "gnuemacs" '(:collection "local" :foreground "#C792EA"))) 

Screenshot from 2022-08-08 15-43-32

trev-dev avatar Aug 08 '22 22:08 trev-dev

You can remove icon border with :stroke-width 0. Since this works, it means the svg icon you're using might be ill-formed. More precisely, can you check if it has a viewBox?

rougier avatar Aug 12 '22 10:08 rougier

"Nicolas P. Rougier" @.***> writes:

You can remove icon border with :stroke-width 0. Since this works, it means the svg icon you're using might be ill-formed. More precisely, can you check if it has a viewBox?

It does not. I only exported the simplest SVG format that I could from Inkscape.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="500"
   height="500"
   viewBox="0 0 132.29166 132.29167"
   version="1.1"
   id="svg365"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs362" />
  <g
     id="layer1">
    <path
       style="fill:#000000;stroke-width:0.264583"
       d="m 64.199683,124.08309 c -5.740043,-4.33611 -15.50906,-9.54901 -24.662021,-13.16004 -7.615632,-3.00453 -18.366932,-6.0777 -25.650216,-7.33192 -1.891771,-0.32577 -3.606536,-0.6402 -3.810588,-0.69874 -0.4966528,-0.14247 -0.239269,-5.03284 0.506157,-9.61712 0.612822,-3.76879 2.482829,-11.50155 3.775055,-15.61042 l 0.873711,-2.77812 7.662207,-0.16326 c 5.624715,-0.11983 8.255038,-0.2832 9.891608,-0.61434 6.345182,-1.28388 11.660301,-3.87239 15.461038,-7.52966 2.844644,-2.73727 4.498689,-5.25363 5.758198,-8.76016 0.616884,-1.71743 0.617115,-1.72332 0.700413,-17.79144 l 0.08333,-16.073438 H 51.998951 49.209324 V 15.487766 7.0210994 h 16.933333 16.93333 v 8.4666666 8.466666 h -2.77813 -2.77812 l 0.004,15.411978 c 0.004,16.80866 0.0216,17.03651 1.54993,20.40723 1.13392,2.5008 2.6347,4.56683 4.82801,6.64642 4.11868,3.9051 9.14681,6.38371 15.59813,7.68907 1.636653,0.33116 4.266933,0.4945 9.892983,0.61434 l 7.66359,0.16326 0.74812,2.38125 c 2.73545,8.70695 4.89563,19.95189 4.64651,24.18772 l -0.0843,1.43356 -2.91042,0.48887 c -17.72915,2.97801 -38.030773,11.11361 -51.059783,20.46151 -1.11173,0.79762 -2.162907,1.44148 -2.335966,1.4308 -0.173059,-0.0107 -1.010396,-0.54498 -1.860749,-1.18735 z"
       id="path346" />
  </g>
</svg>

I will have to look into what this concept of a viewBox means.

-- Reply to this email directly or view it on GitHub: https://github.com/rougier/svg-lib/issues/21#issuecomment-1212951696 You are receiving this because you were mentioned.

Message ID: @.***>

--

Trev : 0FB7 D06B 4A2A F07E AD5B 1169 183B 6306 8AA1 D206

trev-dev avatar Aug 12 '22 13:08 trev-dev

Oh, I see that the viewbox is an attribute, not an element. Let me play with it.

trev-dev avatar Aug 12 '22 21:08 trev-dev

I got this thing as simple as I could! I can still open and view the SVG in inkscape/emacs, but svg-lib can't seem to grok it. It looks pretty similar to the icons in simple-icons:

<svg
   viewBox="0 0 24 24"
   id="svg365"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs362" />
  <g
     id="layer1">
    <path
       d="M 11.637724,22.785082 C 10.569207,21.977911 8.7506929,21.007523 7.0468588,20.335324 5.6292007,19.776028 3.6278336,19.203951 2.2720422,18.970478 1.9198865,18.909858 1.6006815,18.851307 1.5626969,18.84041 1.4702439,18.8139 1.5181569,17.903536 1.6569189,17.05017 1.7709961,16.348606 2.1191005,14.909144 2.3596494,14.144276 l 0.1626426,-0.517155 1.4263282,-0.03038 c 1.0470475,-0.02231 1.5366846,-0.05269 1.8413339,-0.114362 1.1811632,-0.238993 2.1705784,-0.72085 2.8780898,-1.401655 0.5295338,-0.509546 0.8374358,-0.97797 1.0718958,-1.630714 0.114834,-0.319698 0.114877,-0.320796 0.130382,-3.3118919 L 9.8858297,4.1460266 H 9.3665393 8.8472475 V 2.5699451 0.99386545 h 3.1521605 3.152158 V 2.5699451 4.1460245 h -0.517152 -0.51715 l 7.46e-4,2.8689605 c 7.46e-4,3.128949 0.004,3.171361 0.288521,3.798823 0.211081,0.465527 0.490453,0.850125 0.898739,1.237238 0.766698,0.72694 1.702689,1.188338 2.90361,1.431331 0.304665,0.06164 0.794294,0.09205 1.84159,0.114363 l 1.426586,0.03038 0.139264,0.443272 c 0.509207,1.620811 0.911327,3.714068 0.864953,4.502577 l -0.0157,0.266857 -0.541778,0.091 c -3.300302,0.554365 -7.079471,2.068816 -9.504837,3.808934 -0.20695,0.148481 -0.402627,0.268336 -0.434843,0.26635 -0.03222,-0.002 -0.188085,-0.101453 -0.346381,-0.221029 z"
       id="path346" />
  </g>
</svg>

trev-dev avatar Aug 14 '22 06:08 trev-dev

Hey! I did more reading and tinkering while comparing my SVG to the other svgs that work. I was able to get Inkscape to export an "optimized svg". Then, I deleted the attributes that were not a path/shape and got rid of the group <g> tags. The end result was a success!

<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="m11.638 22.785c-1.0685-0.80717-2.887-1.7776-4.5909-2.4498-1.4177-0.5593-3.419-1.1314-4.7748-1.3648-0.35216-0.06062-0.67136-0.11917-0.70935-0.13007-0.092453-0.02651-0.04454-0.93687 0.094222-1.7902 0.11408-0.70156 0.46218-2.141 0.70273-2.9059l0.16264-0.51716 1.4263-0.03038c1.047-0.02231 1.5367-0.05269 1.8413-0.11436 1.1812-0.23899 2.1706-0.72085 2.8781-1.4017 0.52953-0.50955 0.83744-0.97797 1.0719-1.6307 0.11483-0.3197 0.11488-0.3208 0.13038-3.3119l0.015508-2.9921h-1.0386v-3.1522h6.3043v3.1522h-1.0343l7.46e-4 2.869c7.46e-4 3.1289 4e-3 3.1714 0.28852 3.7988 0.21108 0.46553 0.49045 0.85012 0.89874 1.2372 0.7667 0.72694 1.7027 1.1883 2.9036 1.4313 0.30466 0.06164 0.79429 0.09205 1.8416 0.11436l1.4266 0.03038 0.13926 0.44327c0.50921 1.6208 0.91133 3.7141 0.86495 4.5026l-0.0157 0.26686-0.54178 0.091c-3.3003 0.55436-7.0795 2.0688-9.5048 3.8089-0.20695 0.14848-0.40263 0.26834-0.43484 0.26635-0.03222-2e-3 -0.18808-0.10145-0.34638-0.22103z" />
</svg>

svg

trev-dev avatar Aug 26 '22 21:08 trev-dev

Nice! Top and bottom border are part of the icon?

rougier avatar Aug 31 '22 08:08 rougier

Nice! Top and bottom border are part of the icon?

Not sure what that anomylous border is. I don't see it in my modeline :)

trev-dev avatar Aug 31 '22 14:08 trev-dev

Maybe a background color, where the icon is transparent.

rougier avatar Aug 31 '22 14:08 rougier

I see. I could not help but notice that the icon had an opaque background that I did not try to get rid of. I just accepted it and set it to a background I wanted to use.

In my mode-line, if I did not set it, it would end up being my modeline foreground color. Kinda weird I guess.

"Nicolas P. Rougier" @.***> writes:

Maybe a background color, where the icon is transparent.

-- Reply to this email directly or view it on GitHub: https://github.com/rougier/svg-lib/issues/21#issuecomment-1233003151 You are receiving this because you were mentioned.

Message ID: @.***>

--

Trev : 0FB7 D06B 4A2A F07E AD5B 1169 183B 6306 8AA1 D206

trev-dev avatar Aug 31 '22 14:08 trev-dev