アイコンフォントのスケッチからのエクスポート

私はSketchからSVGアイコンをエクスポートしてFontelloにインポートしようとしていますが、SVGはアプリに対して正しくないようです（IcoMoonでは機能しません）。

テストとして作成しようとしているアイコンは、数行の単純な「ハンバーガー」スタイルのアイコンですが、正しく機能しません。控えめに言ってもイライラします。

誰かがこれについて何か経験があり、知識を手放すことができますか？ありがとうございました。

icomoonを正しくインポートするために、スケッチからSVGをエクスポートする方法を見つけました。

ステップ1

パスグループを選択してクリックすることにより、SVGが境界線から外れるのを防ぎます：レイヤー>パス>ストロークのベクトル化

これが機能したことを知るために、閉じたパスに変換されたストロークとインスペクターは、境界線の色ではなく塗りつぶしの色を表示するようになりました。

ステップ2

インスペクタの[ エクスポート可能にする ]タブをクリックし、SVG形式を選択して、各アイコン/ SVG をエクスポートします。

ステップ3

通常どおりSVGアイコンをicomoonにインポートすると、セットにアイコンが正しく表示され、グリッドサイズが正確になります。注：スケッチ上のすべてのSVGが同じ高さであることを確認してください。

UPDATE 2016 それを指摘してくれた@jackocnrに感謝：

2016年の[スケッチ]メニューオプションは、[レイヤー]> [アウトラインに変換]です。

このマニュアルは私のために働いた。それは非常に有益です。彼はスケッチのエクスポートの問題について話しています。記事が削除される場合に備えて、私は彼の記事から引用しています。

全体的なソリューション

1. アイコンごとにアートボードを作成します（挿入->アートボード）。
2. 各アートボードの位置にハーフピクセルがなく、偶数であることを確認してください。
3. すべてのアイコンの回転を削除します。
4. 境界ボックスを削除して、Sketchが不要なコードをエクスポートしないようにします。
5. SVGがボーダーレイヤーから作成されないようにする>パス>ストロークをベクトル化（Gusに感謝）
6. クリーン.svgのエクスポート

*これは、ライターがエクスポートしようとしたアイコンです

スケッチのエクスポートのバグ

バグ＃1

アートボードの位置を偶数に変更することによるスケッチ変換のエクスポートを修正しました。これにより、コード内の変換がすべて削除されます。別のメモでは、位置が半ピクセルずれているため、Sketchはビューボックスのサイズを0 0 25 25に変更しました。元のアートボードは24 x 24ピクセルでした。このバグにより、コードに仕様も追加されました。ブエノなし。

バグ＃2

問題：設計上、各アイコンは幅：24px、高さ：24px、境界線半径：3pxに設定されていました。問題は、エクスポート時に長方形がパスに追加されたため、CSSで任意のサイズに拡大縮小することが困難になっていることです。

解決策：透明な境界ボックスを削除して、CSSに魔法をかけてもらいます。開発者が本当に必要とするのは、24x24pxに設定されたビューボックスだけでした。幅、高さ、および境界半径を追加できます。

バグ＃3

問題：Sketchは回転（-180.000000）をエクスポートします。

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

解決策：.svgアイコンをAdobe Illustratorで開き、アイコンを回転させてから、ドラッグアンドドロップでSketchに戻します。これにより、回転がすべて削除されます。

バグ＃4 問題：スライスツールのエクスポートを使用すると、変換と変換が再度行われます。解決策：なし。しないでください。とにかくスライスするには時間がかかりすぎて時間の無駄です。

サブパスを使用している場合は、エクスポートする前に形状を平坦化してください。Fontelloで、手動で複合パスを作成することに関してエラーが発生しましたが、正しく機能しているようです。

（私の形は、2つの形が切り取られた円でした。）