Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
This is a pre-release version and is not production ready. For new and ongoing projects, please refer to the latest Design System version.
The comprehensive collection of Swiss Post icons.
npm install @swisspost/design-system-icons
First you need to make the icons available in your web application.
This basically means that you need to copy & paste them manually or automatically from the node_modules
folder to a served folder in your project.
The way to do this strongly depends on your project setup.
Read on to find out what the possible solutions look like...
See Getting started with Angular
Add a postinstall
script to your package.json
, to copy & paste the icons to a public folder within your web project.
If you want to know more about pre & post scripts and how they are handled, please read the npm documentation.
// package.json { "scripts": { "postinstall": "node -e \"const fs = require('fs'); fs.cpSync('node_modules/@swisspost/design-system-icons/public/post-icons', 'assets/post-icons', { recursive: true }, (err) => { if (err) throw err; });\"" } }
// package.json { "scripts": { "postinstall": "node postinstall-icons.js" } }
// postinstall-icons.js const fse = require('fs-extra'); const srcDir = 'node_modules/@swisspost/design-system-icons/public/post-icons'; const destDir = 'assets/post-icons'; // To copy a folder or file, select overwrite accordingly try { fse.copySync(srcDir, destDir, { overwrite: true }); console.log('Icons successfully copied!'); } catch (err) { console.error(err); }
Now that you have the icons available in your project, you need to tell the icon
component where to find them.
You can do this with two different solutions:
base-path
globally for all icons on the page.base-path
on every icon
component. This can also be used to overwrite the global base-path
for a single icon.<html> <head> <meta name="design-system-settings" data-post-icon-base="/path/to/all/icons/folder" /> </head> </html>
<post-icon name="1000" base="/base-path/to/your/own/icon-folder"></post-icon>
There is one last thing we want to tell you about.
All icons are also available from a CDN, which is the default if you don't configure a base path for your icons and don't serve them locally. When using the CDN, please note that you need to configure your CORS policy to enable resource loading from unpkg.com.
If your project includes the Content-Security-Policy response header (usually in index.html
),
make sure that default-src
is set to 'self'
. In case you are using the <post-icon>
component you need to add https://unpkg.com/
to the connect-src
in index.html. This is becasue the icons are retrived from there.
money
(solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5564)2691
(by @swisspost-bot with #5522)Added icons: 2688
and 2689
(by @swisspost-bot with #5351)
Added icons: 2690
and 2691
(by @swisspost-bot with #5414)
Added icons: 2692
(by @swisspost-bot with #5468)
Updated icons:
letterreceived
(line & solid): 16, 24, 32, 40, 48 and 64pxmessagereceived
(line & solid): 16, 24, 32, 40, 48 and 64pxreceiving
(line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5468)2685
, 2686
and 2687
(by @swisspost-bot with #5333)Updated icons:
arrowleftdown
(solid): 48pxpreferences
(line & solid): 16, 24, 32, 40, 48 and 64pxstampapost
(line & solid): 16, 24, 32, 40, 48 and 64pxstampbpost
(line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5333)Updated some broken links to the documentation. (by @leagrdv with #5280)
adressbook
(line): 16, 24 and 32pxarrowleftdown
(line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5199)homeservice
(solid): 16, 24, 32, 40, 48 and 64pxinstagram
(line): 16, 24, 32, 40, 48 and 64pxinstagram
(solid): 16 and 24pxlinkedin
(line): 16, 24, 32, 40, 48 and 64pxpicture
(solid): 16, 24, 32, 40, 48 and 64pxsnapchat
(line): 16, 32, 40 and 64pxwhatsapp
(line): 16, 24, 32, 40, 48 and 64pxyoutube
(line): 16, 24, 32, 40, 48 and 64pxkununu
(line): 16, 24, 32, 40, 48 and 64pxaccessblocked
(line & solid): 16, 24, 32, 40, 48 and 64pxaccessepr
(line & solid): 16, 24, 32, 40, 48 and 64pxambulance
(line & solid): 16, 24, 32, 40, 48 and 64pxarchive
(line & solid): 16, 24, 32, 40, 48 and 64pxartificialintelligence
(line & solid): 16, 24, 32, 40, 48 and 64pxaudiofile
(line & solid): 16, 24, 32, 40, 48 and 64pxauthorization
(line & solid): 16, 24, 32, 40, 48 and 64pxblueprint
(line & solid): 16, 24, 32, 40, 48 and 64pxbrain
(line & solid): 16, 24, 32, 40, 48 and 64pxcallconsultation
(line & solid): 16, 24, 32, 40, 48 and 64pxcode
(line & solid): 16, 24, 32, 40, 48 and 64pxdesignsystem
(line & solid): 16, 24, 32, 40, 48 and 64pxdisabledblind
(line & solid): 16, 24, 32, 40, 48 and 64pxdisabledwalking
(line & solid): 16, 24, 32, 40, 48 and 64pxdocumentauditrecordrepository
(line & solid): 16, 24, 32, 40, 48 and 64pxdocumentprotocol
(line & solid): 16, 24, 32, 40, 48 and 64pxemergencyaccess
(line & solid): 16, 24, 32, 40, 48 and 64pxemergency
(line & solid): 16, 24, 32, 40, 48 and 64pxflashoff
(line & solid): 16, 24, 32, 40, 48 and 64pxflash
(line & solid): 16, 24, 32, 40, 48 and 64pxgear
(line & solid): 16, 24, 32, 40, 48 and 64pxgroup
(line & solid): 16, 24, 32, 40, 48 and 64pxnotesadd
(line & solid): 16, 24, 32, 40, 48 and 64pxnotes
(line & solid): 16, 24, 32, 40, 48 and 64pxprotocolaccess
(line & solid): 16, 24, 32, 40, 48 and 64pxprotocolview
(line & solid): 16, 24, 32, 40, 48 and 64pxsdcard
(line & solid): 16, 24, 32, 40, 48 and 64pxsimcard
(line & solid): 16, 24, 32, 40, 48 and 64pxsoundlow
(line & solid): 16, 24, 32, 40, 48 and 64pxsoundmid
(line & solid): 16, 24, 32, 40, 48 and 64pxuploadautomated
(line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5096)speechtotext
(line & solid): 16, 24, 32, 40, 48 and 64pxaccessopen
(line & solid): 16, 24, 32, 40, 48 and 64pxalarm
(line & solid): 16, 24, 32, 40, 48 and 64pxcalculator
(line & solid): 16, 24, 32, 40, 48 and 64pxgendermale
(line & solid): 16, 24, 32, 40, 48 and 64pxsearchconsignment
(line & solid): 16, 24, 32, 40, 48 and 64px (by @swisspost-bot with #5122)Added icons number 1041, 2204, 2642 and 8020. (by @myrta2302 with #4480)
Added icons number 2634, 2635, 2635, 2637, 2638, 2639, 2640 and 2641. (by @oliverschuerch with #4481)
post-icon
mixin, to use any of our icons from within SCSS. (by @oliverschuerch with #4136)post-icon
component. These new icons will change their shape based on their size: small icons will render with less flourish and are optimised for a smaller pixel grid. (by @oliverschuerch with #3969)Added icons number 2613, 2614, 2615, 2616, 2617, 2618, 2619 and 2620. (by @gfellerph with #3781)
Added icons number 2621, 2622, 2623, 2624, 2625, 2626, 2627, 2628, 2629, 2630 and 2631. (by @gfellerph with #3832)
Added icon number 2585. (by @alizedebray with #3104)
Added icons number 2586, 2587 and 2588. (by @alizedebray with #3104)
Synchronized the versions of the following packages:
This will help understanding the dependencies between these packages at a glance but also means that for the individual pacakges, semver is no longer being used. This enables us also to talk about and document Design System versions as a whole instead of documenting the fragmented versions in a complex lookup table. (by @gfellerph with #2856)
Added icons number 2572 and 2573. (by @swisspost-bot with #2553)
Added icon number 2574. (by @swisspost-bot with #2592)
Updated icons number 1001, 1002, 1003, 1004, 1005, 1006, 1007, 1008, 1009, 1010, 1011, 1012, 1013, 1014, 1015, 1016, 1017, 1019, 1020, 1021, 1022, 1023, 1024, 1025, 1026, 1027, 1028, 1030, 1031, 1037, 1038, 1040, 1042, 1043, 1044, 1045, 1047, 1048, 1049, 2000, 2001, 2002, 2005, 2006, 2007, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2019, 2023, 2024, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2035, 2036, 2037, 2039, 2041, 2044, 2045, 2047, 2048, 2054, 2055, 2056, 2057, 2058, 2059, 2060, 2063, 2069, 2070, 2072, 2073, 2075, 2076, 2078, 2080, 2081, 2082, 2083, 2084, 2085, 2086, 2087, 2088, 2089, 2090, 2091, 2092, 2093, 2094, 2095, 2096, 2097, 2099, 2100, 2101, 2102, 2107, 2108, 2114, 2115, 2116, 2117, 2118, 2119, 2120, 2122, 2123, 2124, 2126, 2128, 2131, 2132, 2133, 2134, 2135, 2137, 2138, 2139, 2140, 2141, 2142, 2143, 2144, 2145, 2146, 2147, 2148, 2149, 2151, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2162, 2163, 2164, 2166, 2167, 2168, 2169, 2170, 2171, 2172, 2173, 2175, 2177, 2178, 2179, 2180, 2181, 2182, 2183, 2184, 2185, 2186, 2187, 2188, 2189, 2190, 2191, 2192, 2194, 2195, 2196, 2198, 2199, 2200, 2201, 2202, 2203, 2205, 2206, 2207, 2208, 2209, 2210, 2211, 2212, 2213, 2214, 2215, 2216, 2217, 2218, 2219, 2220, 2221, 2222, 2225, 2227, 2228, 2229, 2230, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2251, 2252, 2253, 2254, 2255, 2256, 2257, 2258, 2259, 2260, 2261, 2262, 2263, 2264, 2265, 2266, 2267, 2268, 2269, 2270, 2271, 2272, 2273, 2274, 2275, 2276, 2277, 2278, 2279, 2280, 2281, 2282, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2294, 2295, 2296, 2297, 2298, 2299, 2300, 2301, 2303, 2304, 2305, 2306, 2307, 2308, 2309, 2310, 2311, 2312, 2313, 2314, 2315, 2316, 2317, 2318, 2319, 2320, 2321, 2322, 2323, 2324, 2325, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2335, 2336, 2337, 2338, 2339, 2340, 2341, 2342, 2343, 2344, 2345, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2363, 2364, 2365, 2366, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2376, 2377, 2378, 2379, 2380, 2381, 2382, 2383, 2384, 2385, 2386, 2387, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2395, 2396, 2397, 2398, 2399, 2400, 2401, 2402, 2403, 2404, 2405, 2406, 2407, 2408, 2409, 2410, 2411, 2412, 2413, 2414, 2415, 2416, 2417, 2418, 2419, 2420, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2452, 2453, 2454, 2455, 2456, 2457, 2458, 2459, 2460, 2461, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2469, 2470, 2471, 2472, 2473, 2474, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2482, 2483, 2484, 2485, 2486, 2487, 2488, 2490, 2491, 2492, 2493, 2494, 2495, 2496, 2497, 2498, 2499, 2500, 2501, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2511, 2512, 2513, 2514, 2515, 2516, 2517, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2532, 2533, 2534, 2535, 2536, 2537, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2547, 2548, 2549, 2550, 2551, 2552, 2553, 2554, 2556, 2558, 2560, 2561, 2562, 2564, 3013, 3021, 3022, 3024, 3027, 3032, 3033, 3036, 3038, 3040, 3042, 3043, 3044, 3047, 3048, 3049, 3050, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3062, 3063, 3064, 3066, 3068, 3069, 3070, 3074, 3075, 3076, 3077, 3078, 3079, 3080, 3082, 3083, 3084, 3085, 3088, 3091, 3094, 3096, 3097, 3098, 3099, 3101, 3102, 3103, 3105, 3108, 3109, 3110, 3111, 3112, 3113, 3114, 3118, 3119, 3120, 3121, 3122, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3134, 3135, 3138, 3139, 3140, 3142, 3143, 3144, 3146, 3147, 3148, 3150, 3151, 3152, 3153, 3154, 3155, 3156, 3157, 3158, 3159, 3161, 3162, 3163, 3164, 3168, 3169, 3170, 3171, 3172, 3173, 3174, 3177, 3178, 3179, 3180, 3181, 3182, 3184, 3185, 3186, 3187, 3190, 3191, 3192, 3193, 3194, 3196, 3197, 3198, 3203, 3204, 3206, 3207, 3208, 3209, 3210, 3212, 3213, 3214, 3216, 3217, 3218, 3219, 3222, 3224, 3225, 3227, 3231, 3234, 3238, 3239, 3240, 3241, 3242, 3244, 3245, 3246, 3248, 3249, 3250, 3255, 3256, 3258, 8000, 8005, 8007, 8011, 8012, 8014, 8015 and 8019. Added icons number 2566 and 2567. (by @swisspost-bot with #2388)
Added icons number 2568, 2569 and 2570. (by @swisspost-bot with #2420)
Added icons number 2523, 2525, 2526 and 2527. (by @swisspost-bot with #1425)
Added icons number 2524, 2528, 2529, 2530, 2531, 2532, 2533, 2534 and 2535. (by @swisspost-bot with #1487)
Added icons number 2515, 2516, 2517, 2518, 2519 and 2520. (by @swisspost-bot with #1388)
Added icons number 2521 and 2522. (by @swisspost-bot with #1411)
<post-icon />
web-component responsible for loading and displaying the icon. (by @gfellerph with #933)