how can i register custom svg images as icons.

i want to register custom svg images as icons, how can i do?

like the feature as : Icon.register in https://github.com/Justineo/vue-awesome

here is my custom svg image.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512pt" height="512pt" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="#55b954fe">
<path fill="#55b954" opacity="1.00" d=" M 55.53 73.31 C 60.28 61.66 72.23 53.09 84.96 53.32 C 199.00 53.32 313.04 53.32 427.08 53.33 C 439.67 53.11 451.48 61.53 456.32 72.98 C 453.94 71.19 452.53 68.55 450.54 66.40 C 444.70 59.71 435.94 55.67 427.07 55.54 C 377.04 55.58 327.01 55.64 276.98 55.65 C 272.98 55.67 269.00 56.88 265.00 56.02 C 261.66 55.28 258.34 56.45 254.99 56.34 C 200.34 56.35 145.68 56.43 91.03 56.45 C 86.07 56.65 80.94 55.86 76.15 57.57 C 68.31 59.66 62.24 65.53 57.67 71.99 C 57.13 72.32 56.07 72.98 55.53 73.31 Z" />
</g>
<g id="#20ae1fff">
<path fill="#20ae1f" opacity="1.00" d=" M 76.15 57.57 C 80.94 55.86 86.07 56.65 91.03 56.45 C 145.68 56.43 200.34 56.35 254.99 56.34 C 258.34 56.45 261.66 55.28 265.00 56.02 C 269.00 56.88 272.98 55.67 276.98 55.65 C 327.01 55.64 377.04 55.58 427.07 55.54 C 435.94 55.67 444.70 59.71 450.54 66.40 C 452.53 68.55 453.94 71.19 456.32 72.98 C 458.13 77.05 458.77 81.56 458.69 86.00 C 458.68 199.67 458.70 313.33 458.68 427.00 C 459.06 443.46 444.50 458.63 428.00 458.65 C 313.65 458.70 199.30 458.67 84.96 458.67 C 68.13 459.18 52.95 443.85 53.31 427.08 C 53.29 313.37 53.30 199.67 53.29 85.97 C 53.24 81.67 53.81 77.28 55.53 73.31 C 56.07 72.98 57.13 72.32 57.67 71.99 C 62.24 65.53 68.31 59.66 76.15 57.57 M 201.51 161.40 C 199.82 165.03 199.27 169.02 197.75 172.71 C 189.43 197.96 176.85 221.79 160.44 242.78 C 162.68 250.35 165.41 257.80 167.33 265.47 C 172.79 259.65 177.49 253.14 182.66 247.06 C 182.71 281.74 182.68 316.43 182.67 351.11 C 189.65 351.00 196.65 351.23 203.62 350.99 C 203.65 305.27 203.61 259.54 203.65 213.82 C 209.29 202.90 214.23 191.62 218.18 179.98 C 218.85 176.79 220.98 173.81 220.71 170.49 C 214.31 167.46 207.88 164.53 201.51 161.40 M 266.11 168.53 C 269.17 174.65 272.08 180.84 274.60 187.19 C 255.24 187.15 235.87 187.17 216.51 187.18 C 216.40 193.75 216.46 200.33 216.49 206.91 C 260.96 206.79 305.42 206.90 349.89 206.85 C 349.91 200.29 349.91 193.74 349.89 187.18 C 331.79 187.19 313.68 187.13 295.58 187.21 C 292.94 178.97 290.01 170.87 286.36 163.02 C 279.61 164.91 272.80 166.46 266.11 168.53 M 234.63 217.78 C 234.71 224.07 234.68 230.36 234.64 236.65 C 267.41 236.81 300.19 236.66 332.96 236.72 C 333.03 230.41 333.00 224.10 332.98 217.80 C 300.20 217.80 267.41 217.80 234.63 217.78 M 234.60 246.40 C 234.75 252.70 234.67 259.01 234.65 265.32 C 267.43 265.31 300.21 265.27 332.99 265.33 C 332.98 258.99 333.05 252.65 332.96 246.32 C 300.17 246.39 267.38 246.23 234.60 246.40 M 230.18 276.32 C 230.13 301.12 230.15 325.92 230.18 350.72 C 237.04 350.72 243.91 350.71 250.78 350.72 C 250.85 347.36 250.78 343.99 250.82 340.63 C 272.86 340.73 294.91 340.60 316.95 340.70 C 316.97 344.01 316.91 347.33 316.95 350.65 C 323.64 350.78 330.33 350.69 337.01 350.70 C 337.48 326.05 336.98 301.23 337.28 276.51 C 301.62 276.11 265.88 276.47 230.18 276.32 Z" />
<path fill="#20ae1f" opacity="1.00" d=" M 250.80 295.84 C 272.81 295.77 294.81 295.82 316.82 295.81 C 317.08 304.11 316.89 312.44 316.91 320.75 C 294.88 320.77 272.85 320.73 250.82 320.76 C 250.79 312.45 250.83 304.14 250.80 295.84 Z" />
</g>
<g id="#ffffffff">
<path fill="#ffffff" opacity="1.00" d=" M 201.51 161.40 C 207.88 164.53 214.31 167.46 220.71 170.49 C 220.98 173.81 218.85 176.79 218.18 179.98 C 214.23 191.62 209.29 202.90 203.65 213.82 C 203.61 259.54 203.65 305.27 203.62 350.99 C 196.65 351.23 189.65 351.00 182.67 351.11 C 182.68 316.43 182.71 281.74 182.66 247.06 C 177.49 253.14 172.79 259.65 167.33 265.47 C 165.41 257.80 162.68 250.35 160.44 242.78 C 176.85 221.79 189.43 197.96 197.75 172.71 C 199.27 169.02 199.82 165.03 201.51 161.40 Z" />
<path fill="#ffffff" opacity="1.00" d=" M 266.11 168.53 C 272.80 166.46 279.61 164.91 286.36 163.02 C 290.01 170.87 292.94 178.97 295.58 187.21 C 313.68 187.13 331.79 187.19 349.89 187.18 C 349.91 193.74 349.91 200.29 349.89 206.85 C 305.42 206.90 260.96 206.79 216.49 206.91 C 216.46 200.33 216.40 193.75 216.51 187.18 C 235.87 187.17 255.24 187.15 274.60 187.19 C 272.08 180.84 269.17 174.65 266.11 168.53 Z" />
<path fill="#ffffff" opacity="1.00" d=" M 234.63 217.78 C 267.41 217.80 300.20 217.80 332.98 217.80 C 333.00 224.10 333.03 230.41 332.96 236.72 C 300.19 236.66 267.41 236.81 234.64 236.65 C 234.68 230.36 234.71 224.07 234.63 217.78 Z" />
<path fill="#ffffff" opacity="1.00" d=" M 234.60 246.40 C 267.38 246.23 300.17 246.39 332.96 246.32 C 333.05 252.65 332.98 258.99 332.99 265.33 C 300.21 265.27 267.43 265.31 234.65 265.32 C 234.67 259.01 234.75 252.70 234.60 246.40 Z" />
<path fill="#ffffff" opacity="1.00" d=" M 230.18 276.32 C 265.88 276.47 301.62 276.11 337.28 276.51 C 336.98 301.23 337.48 326.05 337.01 350.70 C 330.33 350.69 323.64 350.78 316.95 350.65 C 316.91 347.33 316.97 344.01 316.95 340.70 C 294.91 340.60 272.86 340.73 250.82 340.63 C 250.78 343.99 250.85 347.36 250.78 350.72 C 243.91 350.71 237.04 350.72 230.18 350.72 C 230.15 325.92 230.13 301.12 230.18 276.32 M 250.80 295.84 C 250.83 304.14 250.79 312.45 250.82 320.76 C 272.85 320.73 294.88 320.77 316.91 320.75 C 316.89 312.44 317.08 304.11 316.82 295.81 C 294.81 295.82 272.81 295.77 250.80 295.84 Z" />
</g>
</svg>

[joshualyon]

It’s the same code you would use in the FontAwesome JavaScript library elsewhere. Define the icon using their format {prefix, name, icon: [width, height, [ligatures], unicode, path]}. Then add that object to your library.

/* icons.js */
export const faMyIcon= { prefix: 'fac', iconName: 'my-icon', icon: [512, 512, [], null, "{your-merged-path-data}"] };

/* app.js */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faMyIcon } from "@app/icons"
library.add(faMyIcon)

[robmadole]

So @joshualyon is exactly right. That’s the way you do it. We don’t have this officially documented or supported because we need some guard rails up in a lot of places to support it. This is on our todo list though.