Как изменить значки бокового меню туманности с помощью собственного SVG

Здесь я пытаюсь сделать это, сначала создайте внешний файл, вызовите iconpack.ts, чтобы добавить внешние svg и добавить svg, как показано ниже

      export const ICON_PACK_3 = {
'performance-manager': '<svg id="Capa_1" enable-background="new 0 0 512 512" height="24" viewBox="0 0 512 512" width="24" xmlns="http://www.w3.org/2000/svg"><g><circle cx="296" cy="356" r="10"/><circle cx="256" cy="256" r="10"/><circle cx="256" cy="356" r="10"/><circle cx="216" cy="356" r="10"/><path fill="#222b45b8" d="m256 0c-138.04 0-256 117.711-256 256v20c0 5.523 4.477 10 10 10h38.157c2.355 16.291 6.691 32.335 12.94 47.889l-27.946 16.131c-2.297 1.326-3.974 3.51-4.66 6.072-.687 2.562-.327 5.292.999 7.589l20 34.64c2.762 4.783 8.876 6.42 13.66 3.661l28.015-16.171c10.269 13.023 22.003 24.757 35.026 35.026l-16.171 28.015c-2.761 4.783-1.122 10.898 3.661 13.66l34.64 20c4.781 2.76 10.9 1.123 13.661-3.661l16.131-27.946c15.554 6.25 31.598 10.585 47.889 12.94v38.155c0 5.523 4.477 10 10 10h40c5.523 0 10-4.477 10-10v-38.157c16.291-2.355 32.335-6.691 47.889-12.94l16.131 27.946c2.759 4.781 8.877 6.421 13.661 3.661l34.64-20c4.783-2.761 6.421-8.876 3.661-13.66l-16.171-28.015c13.023-10.269 24.757-22.003 35.026-35.026l28.015 16.171c4.783 2.761 10.898 1.122 13.66-3.661l20-34.64c2.76-4.781 1.122-10.901-3.661-13.661l-27.946-16.131c6.25-15.554 10.585-31.598 12.94-47.889h38.153c5.523 0 10-4.477 10-10v-20c0-137.903-117.61-255.998-256-255.998zm-208.145 147.376 29.935 17.284c4.762 2.749 10.887 1.144 13.66-3.66 2.762-4.783 1.123-10.899-3.66-13.66l-29.699-17.147c18.743-28.721 43.486-53.374 72.139-72.036l17.11 29.633c2.774 4.806 8.9 6.409 13.66 3.66 4.783-2.761 6.422-8.877 3.66-13.66l-17.236-29.853c30.064-16.232 63.616-26.106 98.576-27.698v35.761c0 5.523 4.477 10 10 10s10-4.477 10-10v-35.761c34.96 1.592 68.512 11.466 98.576 27.698l-17.236 29.853c-2.762 4.783-1.123 10.899 3.66 13.66 4.762 2.749 10.887 1.144 13.66-3.66l17.109-29.633c28.653 18.662 53.395 43.314 72.138 72.036l-29.697 17.147c-4.783 2.761-6.422 8.877-3.66 13.66 2.775 4.806 8.9 6.408 13.66 3.66l29.933-17.282c13.062 24.177 22.024 50.713 25.814 78.622h-66.615c-14.085-78.584-82.479-140-167.342-140-82.619 0-153.049 59.591-167.351 140h-66.607c3.789-27.909 12.75-54.446 25.813-78.624zm444.145 118.624h-37.01c-5.141 0-9.443 3.897-9.951 9.013-2.001 20.166-7.359 40.015-15.924 58.994-2.113 4.683-.334 10.206 4.116 12.774l26.958 15.561-10 17.319-27.01-15.591c-4.445-2.565-10.107-1.352-13.109 2.809-12.012 16.648-26.544 31.18-43.192 43.192-4.16 3.002-5.374 8.666-2.809 13.109l15.591 27.01-17.319 10-15.561-26.958c-2.568-4.45-8.091-6.23-12.774-4.116-18.979 8.565-38.828 13.923-58.994 15.924-5.116.508-9.013 4.811-9.013 9.951v37.009h-20v-37.01c0-5.141-3.897-9.443-9.013-9.951-20.166-2.001-40.015-7.359-58.994-15.924-4.682-2.113-10.206-.334-12.774 4.116l-15.561 26.958-17.319-10 15.591-27.01c2.565-4.443 1.351-10.107-2.809-13.109-16.648-12.012-31.18-26.544-43.192-43.192-3.002-4.161-8.664-5.375-13.109-2.809l-27.01 15.591-10-17.319 26.958-15.561c4.45-2.568 6.229-8.091 4.116-12.774-8.565-18.979-13.923-38.828-15.924-58.994-.506-5.115-4.809-9.012-9.949-9.012h-37.01v-10c0-3.333.08-6.674.23-10.01h66.07c-.193 3.337-.3 6.677-.3 10.01 0 93.738 76.262 170 170 170 28.681 0 57.036-7.278 82-21.048 4.836-2.667 6.594-8.75 3.926-13.586-2.668-4.835-8.75-6.592-13.586-3.926-22.014 12.142-47.028 18.56-72.34 18.56-82.71 0-150-67.29-150-150 0-82.913 67.339-150 150-150 36.128 0 70.308 12.694 97.455 35.962l-88.43 64.854c-2.967-.543-5.987-.816-9.025-.816-27.57 0-50 22.43-50 50s22.43 50 50 50 50-22.43 50-50c0-3.038-.273-6.058-.816-9.025l64.845-88.417c22.292 26.13 35.971 60.284 35.971 97.442 0 25.312-6.418 50.326-18.561 72.339-2.667 4.836-.91 10.919 3.926 13.586 4.835 2.667 10.918.911 13.586-3.926 13.771-24.963 21.049-53.318 21.049-81.999 0-3.333-.106-6.673-.3-10h66.069c.151 3.326.23 6.667.23 10v10zm-207.199-18.426c.795 2.723 1.199 5.558 1.199 8.426 0 16.542-13.458 30-30 30s-30-13.458-30-30 13.458-30 30-30c2.868 0 5.703.403 8.426 1.199 2.986.874 6.209.305 8.718-1.535l49.481-36.29-36.29 49.481c-1.839 2.51-2.406 5.732-1.534 8.719z"/><circle cx="369" cy="369" r="10"/></g></svg>',

};

после этого вызовите библиотеки значков внутри конструктора

       this.iconLibraries.registerSvgPack('pack-1', ICON_PACK_1);

после этого Обновите файл menu.ts

      export const MENU_ITEMS: NbMenuItem[] = [{
    title: "VNF Onboarding",
    link: "/cvnfm-vnf-package-management/view",
    icon: { icon: 'VNF-pkg', pack: 'pack-1' },
  },]

0 ответов

Другие вопросы по тегам