跳至主要内容

管理 Icon Symbols

透過滑入Icon, 可進行複製Icon代碼、編輯Icon內容、下載單個Icon、刪除Icon

圖標列表

其實你不用擔心使用這個功能會受限在acrool平台中，因為 iconSymbols 是可逆回單個svg 並且你在acrool 可以很好的協作

1. 新增 Icon SVG Symbols​

我們提供透過 SVG上傳，假如你需要轉移 SVG Symbols，你可以選擇SVG Symbols上傳

Suggestion

因為一些設計軟體產出的SVG會增加一些多餘的節點，例如 id, style 等等，所以我們會在您上傳SVG時，只保留基本的屬性來節省檔案容量來提升載入效能。

如果你真的需要那些額外的屬性，你可以進行手動編輯

新增圖標

1.1. 使用SVG圖片上傳​

例如這樣的內容

圖標編輯光箱 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <path d="M955.904 858.112z" fill="#0a66c2"/>
    <path d="M312.832 63.488H75.264C33.792 63.488 0 97.28 0 138.752v237.568c0 41.472 33.792 75.264 75.264 75.264h237.568c41.472 0 75.264-33.792 75.264-75.264V138.752c0-41.472-33.792-75.264-75.264-75.264zM305.152 368.64H82.944V146.432h222.72V368.64zM312.832 572.416H75.264c-41.472 0-75.264 33.792-75.264 75.264v237.568c0 41.472 33.792 75.264 75.264 75.264h237.568c41.472 0 75.264-33.792 75.264-75.264v-237.568c0-41.472-33.792-75.264-75.264-75.264z m-7.68 305.152H82.944v-222.72h222.72v222.72zM518.144 169.984c2.048 1.024 4.608 1.536 6.656 1.536H982.528c2.048 0 4.096-0.512 6.144-1.024 18.944-4.096 32.768-20.48 32.768-39.936 0-18.944-13.312-35.328-31.744-39.936-2.048-1.024-4.608-1.536-7.168-1.536h-457.728c-2.56 0-5.12 0.512-7.168 2.048-17.92 4.608-31.232 20.992-31.232 39.424 0 18.432 13.312 35.328 31.744 39.424zM516.608 398.336c2.56 1.536 5.12 2.048 7.68 2.048h457.728c2.56 0 4.608-0.512 7.168-1.536 18.432-4.608 31.744-20.992 31.744-39.936 0-19.456-13.824-35.84-32.768-39.936-2.048-0.512-4.096-1.024-6.144-1.024H524.288c-2.048 0-4.608 0.512-6.656 1.536-18.432 4.608-31.744 20.992-31.744 39.936 0.512 17.92 13.312 34.304 30.72 38.912zM517.12 704c2.56 1.536 5.12 2.048 7.68 2.048h457.728c1.024 0 2.048 0 3.072-0.512 21.504-1.536 38.4-19.456 38.4-40.96 0-22.528-18.432-41.472-41.472-41.472H524.8c-2.048 0-4.608 0.512-6.656 1.536-18.432 4.608-31.744 20.992-31.744 39.936 0 18.432 12.8 34.304 30.72 39.424zM986.624 827.392c-1.536-0.512-2.56-0.512-4.096-0.512h-457.728c-2.56 0-5.12 0.512-7.68 2.048-17.92 4.608-30.72 20.992-30.72 39.424 0 18.944 13.312 35.328 32.256 39.936 2.048 1.024 4.096 1.024 6.144 1.024h454.656c1.024 0 2.048 0.512 3.072 0.512 22.528 0 41.472-18.432 41.472-41.472 0-20.992-16.384-38.912-37.376-40.96z"/>
</svg>

將檔案拖動到框內即可進行上傳

1.2. 使用SVG Symbols上傳​

例如這樣的內容

圖標檔內容示意 
export type TIconCode = 'add_members'|'adjustment';
export enum EIconCode {
  'add_members'='add_members',
  'adjustment'='adjustment',
}

const SvgSymbol = (
    <svg xmlns="http://www.w3.org/2000/svg" style={{display: 'none'}}>
        <symbol id="icon_add_members" viewBox="0 0 1024 1024">
            <path d="M856.143503 793.20045l-99.048877 0 0 102.337783-99.044784 0L658.049842 793.20045l-99.048877 0L559.000965 690.817642l99.048877 0L658.049842 588.480882l99.044784 0 0 102.33676 99.044784 0 0 102.382808L856.143503 793.20045 856.143503 793.20045zM459.937762 793.20045c0 17.482163 2.296299 34.413787 5.004991 51.144844L163.304831 844.345294c-0.364297-6.918573-0.485047-13.95278-0.485047-20.918425 0-210.640418 133.046179-381.345288 297.117978-381.345288 64.918545 0 124.501572 27.420513 173.346023 72.736605C531.191596 563.43137 459.937762 669.443845 459.937762 793.20045L459.937762 793.20045 459.937762 793.20045zM462.718085 402.857231c-82.84687 0-149.972687-61.58973-149.972687-137.495514 0-75.881225 67.125817-137.444349 149.972687-137.444349 82.839707 0 150.014642 61.563124 150.014642 137.444349C612.732727 341.267501 545.557792 402.857231 462.718085 402.857231L462.718085 402.857231 462.718085 402.857231zM462.718085 402.857231"/>
        </symbol>
        <symbol id="icon_adjustment" viewBox="0 0 1024 1024">
            <path d="M424.10937473 424.10937473v70.31250054h-70.31249973v-70.31250054h-70.31249973v-70.31249973h70.31249973v-70.31249973h70.31249973v70.31249973h70.31250054v70.31249973h-70.31250054zM881.140625 142.859375v738.28125H142.859375V142.859375h738.28125zM213.17187473 810.82812527L810.82812527 213.17187473H213.17187473v597.65625054z m351.56250027-193.35937527v70.31249973h175.78124973v-70.31249973H564.734375z"/>
        </symbol>
    </svg>);

export default SvgSymbol;

將檔案拖動到框內即可進行上傳

2. 編輯 Icon SVG Symbols​

可透過編輯功能來自行編輯 svg 編碼內容，並且從右側進行預覽

圖標編輯光箱