V
V
valikhan2015-06-01 18:51:55
JavaScript
valikhan, 2015-06-01 18:51:55

How do I insert my icon into the stock of free Raphael JS icons?

In general, I created a wheel with scrolls on wheelnav js, and inside it the icons are called through the free stock of Raphael JS icons .
The task is to insert your own icon instead of the default ones. what is done
- created a picture, converted it to svg format.
- I uploaded it through this service - I got the code directly from raphael
- I picked up the library itself and the stock of icons on my site in the header, I try to add my icon to the end, it does not work, because the resulting code has several var path elements inside it, and in the default stock there are purely coordinates , ready.
Tell me a solution to the problem so as not to draw new icons by coordinates.
example ad icon in stock

opensource:"M15.5,1.125c-8.222,0-14.911,6.689-14.911,14.911c0,6.262,3.88,11.634,9.362,13.839l3.639-9.076c-1.888-0.758-3.222-2.604-3.222-4.763c0-2.834,2.297-5.132,5.131-5.132s5.131,2.298,5.131,5.132c0,2.157-1.334,4.005-3.222,4.763l3.64,9.076c5.479-2.206,9.361-7.578,9.361-13.839C30.41,7.814,23.721,1.125,15.5,1.125z",

example of my icon from the generator
var rsr = Raphael('rsr', '50', '51'); 
var path_a = rsr.path("
M 0.00 0.00 L 27.39 0.00 C 27.82 0.61 28.68 1.82 29.11 2.42 C 32.78 4.14 33.05 8.47 33.97 11.91 C 35.39 9.61 36.73 7.26 38.06 4.91 C 37.99 7.33 37.89 9.75 37.85 12.18 C 38.54 8.95 38.63 5.61 37.92 2.37 C 36.80 4.54 35.77 6.75 34.76 8.96 C 33.95 5.24 31.80 1.99 28.54 0.00 L 50.00 0.00 L 50.00 29.99 C 48.25 27.65 45.99 25.77 43.58 24.16 C 45.00 26.32 46.59 28.35 48.14 30.40 C 47.53 30.47 46.30 30.59 45.68 30.65 C 46.80 31.84 47.91 33.03 49.01 34.23 C 49.26 33.74 49.75 32.74 50.00 32.25 L 50.00 51.00 L 0.00 51.00 L 0.00 0.00 Z");
path_a.attr({fill: '#ffffff','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_a'); var path_b = rsr.path(" M 27.39 0.00 L 28.54 0.00 C 31.80 1.99 33.95 5.24 34.76 8.96 C 35.77 6.75 36.80 4.54 37.92 2.37 C 38.63 5.61 38.54 8.95 37.85 12.18 C 37.89 9.75 37.99 7.33 38.06 4.91 C 36.73 7.26 35.39 9.61 33.97 11.91 C 33.05 8.47 32.78 4.14 29.11 2.42 C 28.68 1.82 27.82 0.61 27.39 0.00 Z"); path_b.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_b'); var path_c = rsr.path(" M 2.78 11.05 C 7.94 6.81 14.16 3.46 20.93 3.05 C 24.09 2.93 27.13 4.17 29.54 6.15 C 30.08 5.47 30.62 4.79 31.18 4.13 C 31.36 6.70 31.48 9.27 31.48 11.84 C 30.11 9.02 28.34 5.89 25.01 5.16 C 17.04 2.97 9.58 7.53 2.78 11.05 Z"); path_c.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_c'); var path_d = rsr.path(" M 8.70 9.84 C 13.03 7.40 17.89 5.04 23.02 5.97 C 25.35 6.22 26.89 8.16 28.47 9.66 C 26.12 8.49 23.85 6.67 21.07 6.82 C 16.76 6.89 12.83 8.88 8.70 9.84 Z"); path_d.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_d'); var path_e = rsr.path(" M 18.74 14.77 C 20.40 13.59 22.34 12.62 24.31 13.85 C 24.31 14.53 24.28 15.20 24.23 15.87 C 22.64 17.29 23.60 19.33 23.76 21.11 C 22.28 19.38 21.62 17.37 22.73 15.22 C 22.06 15.16 20.72 15.04 20.05 14.98 C 20.26 17.31 20.50 19.63 20.67 21.96 C 19.12 19.86 18.76 17.32 18.74 14.77 Z"); path_e.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_e'); var path_f = rsr.path(" M 37.99 14.79 C 40.72 17.00 42.73 19.91 43.97 23.19 C 42.83 22.87 40.57 22.23 39.43 21.92 C 39.83 22.63 40.62 24.06 41.01 24.77 C 39.25 23.27 37.25 22.09 35.24 20.96 C 37.44 20.90 39.64 20.88 41.84 20.88 C 40.55 18.86 39.23 16.85 37.99 14.79 Z"); path_f.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_f'); var path_g = rsr.path(" M 31.10 32.89 C 29.68 29.70 29.08 26.25 29.21 22.76 C 29.88 25.69 30.50 28.66 31.82 31.37 C 34.29 36.36 33.25 42.09 32.83 47.40 C 32.06 47.31 31.30 47.22 30.53 47.13 C 30.12 47.68 29.29 48.76 28.88 49.30 C 31.08 44.21 33.35 38.37 31.10 32.89 Z"); path_g.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_g'); var path_h = rsr.path(" M 43.58 24.16 C 45.99 25.77 48.25 27.65 50.00 29.99 L 50.00 32.25 C 49.75 32.74 49.26 33.74 49.01 34.23 C 47.91 33.03 46.80 31.84 45.68 30.65 C 46.30 30.59 47.53 30.47 48.14 30.40 C 46.59 28.35 45.00 26.32 43.58 24.16 Z"); path_h.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_h'); var path_i = rsr.path(" M 31.77 26.72 C 35.70 27.90 37.71 31.56 37.81 35.49 C 38.68 36.54 39.53 37.60 40.37 38.67 C 38.98 37.92 37.58 37.19 36.15 36.50 C 36.78 32.52 34.79 29.12 31.77 26.72 Z"); path_i.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_i'); var path_j = rsr.path(" M 23.70 43.41 C 25.25 39.00 24.60 34.17 26.30 29.80 C 25.95 32.89 25.91 35.99 25.89 39.09 C 25.75 42.55 23.87 45.58 22.04 48.40 C 21.22 48.49 19.58 48.69 18.76 48.78 C 20.48 47.06 22.01 45.16 23.70 43.41 Z"); path_j.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_j'); var path_k = rsr.path(" M 42.80 41.08 C 44.86 39.40 46.70 37.47 48.33 35.36 C 47.90 36.92 47.41 38.46 46.90 39.98 C 45.53 40.36 44.17 40.73 42.80 41.08 Z"); path_k.attr({fill: '#727272','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_k'); var rsrGroups = [];

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
valikhan, 2015-06-04
@valikhan

I solved this problem, here is the answer if anyone needs it:
When adding a svg file, you need to make sure that inside it there are coordinates of type contours (path) along all lines of the drawing
if the file inside has a tag, then in illustrator (or whatever you have there) you need to convert it so that the layers assigned to each contour appear, Rafael will use their coordinates, in fact, only these contours are what we need.
Then we fill this file into the converter , we get the code with Rafael additives.
From this code we pull out the same coordinates of the contours (I did this, you can try without a converter directly) then we write them in one line without spaces, in one line, replace the spaces with a comma, inside the coordinates of the contour, and at the junctions of the contours we write together, without spaces. The very last letter Z must be in lowercase, of course (otherwise Rafael will not understand)!
For example, we received a code from the converter like this
pulls out the right thing from it and we have this view
We add this code to the end of the stock free icons file and call it whatever we want, following the example of how other icons are called.
We use and rejoice.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question