-
Notifications
You must be signed in to change notification settings - Fork 10
Create new icon
Take a look at source of typical ACYLS icon:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48">
<defs id="acyl-settings">
<linearGradient id="acyl-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF0000;stop-opacity:1.000000"/>
<stop offset="100%" style="stop-color:#FF6B00;stop-opacity:1.000000"/>
</linearGradient>
<g id="acyl-filter">
<filter id="filter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence id="feTurbulence1" result="result1" numOctaves="1" baseFrequency="0.20 0.06" type="turbulence"/>
<feGaussianBlur id="feGaussianBlur1" in="SourceGraphic" stdDeviation="2.0"/>
<feComposite id="feComposite1" operator="out" in2="result1"/>
</filter>
</g>
<g id="acyl-drawing">
<path d="M 4,4 L 44,4 L 44,44 L 33,44 L 33,31 L 15,31 L 15,34 L 30,34 L 30,44 L 4,44 L 4,18 L 33,18 L 33,15 L 4,15 z " id="path-main"/>
</g>
</defs>
<g id="acyl-visual">
<use id="visible1" transform="translate(24,24) scale(1.00) translate(-24,-24)" style="fill:url(#acyl-gradient);filter:url(#filter)" xlink:href="#acyl-drawing"/>
</g>
</svg>
Main icon appearance defined by original content placed inside acyl-drawing
tag. Other stuff like acyl-visual
, acyl-filter
, acyl-gradient
autogenerated with scripts. So the simplest way create new one is make copy of any icon from scalable/real_icons
and change its acyl-drawing
.
If you are good in SVG drawing you can just edit icon source. Remember that dimensions of your image should not exceed 44 pixels, while canvas size 48x48.
For example, replace all inside acyl-drawing
group tag with
<path d="M 2,5 2,43 46,24 z" id="path-main"/>
Congratulation, brand new "playbutton" icon has been done.
Another way is tracing bitmap image with help of any vector editor or utility, if you have raster icon with suitable look and license.
Here is step by step example for Inkscape editor:
- Create new document with 48x48 canvas size.
- Import bitmap.
- Choose Trace Bitmap (Shift+Alt+B) and change mode setting to make your tracing result in single path. Trace bitmap.
- Change size of new vector image to make biggest dimension equal 44 px.
- Move vector image to the center of canvas.
- Open image source (Ctrl+Shift+X) and copy path attribute.
- Edit any copy of ACYLS icon replacing its path tag attribute with new one.
According ACYLS multipurpose icon mechanic you should place new icon to special real_icons
directory, and then create one or more links.
$ cp awesome.svg ~/.icons/ACYLS/scalable/real_icons/apps/
$ cd ~/.icons/ACYLS/scalable/apps/
$ ln -s ../real_icons/apps/awesome.svg awesome.svg